better to have detail info for scale (the degree, the interval space, the semitone number) so that user can memorize it without calculate it from the chromatic circle
e.g. for diatonic aeolian mode
the degree : 1 2 b3 4 5 b6 b7
the interval space : W H W W H W W
the semitone number : 0 2 3 5 7 8 10 12

the logic can be translate from intervals on music-module.ts
e.g.
intervals: new mod.Mod([true, false, true, false, true, true, false, true, false, true, false, true])

thanks

Maybe moving the inlay dots to below the fretboard would make it easier to read, while still indicating where on the neck these notes are.

it'll be nice to have a fretboard configuration (total fret shown on guitar and fret custom to elimiate unused frets)
case for fret custom
there are pattern that repeated on fretboard guitar, and for newbie who want to learn A Minor Pentatonic using 6 Strings Standard Tuning
can be focused on pattern 1 (for example) which is start from fret 5 - fret 8, so the other fretboards not shown and they can focused just on that fret

thanks

problem
when visiting guitardashboard.com right side take more space

thanks

not every song play just using 1 scale, sometimes 1 song can play in more than 1 scale, it can help melodic guitarist to improvisation by using this info
the logic is base on the interval, just match it between the scale
like example below, when song started to play using major pentatonic scale in intro (blue), when goes to the middle the guitarist can change it into lydian mode just by adding b5 and 7 note into the melodic (the different note between scale is indicate in green)

thanks

Hi there!
Thank you so much for the clean, easy to use and intuitive app. I have 1 request, as a lefty, I spend most of my time looking at other righties' neck when learning new things on the guitar, and it is exactly as I am looking at myself in the mirror.
So basically what I'd love to be implemented is another option for the current left-handed mode, but with the low E on top (some apps call it the 'flip the nut' mode).

All the best!

on harmonic minor scale :

• harmonic minor no 7 on viidim
• lydian #2 no 7 on iidim
• ionian #5 no 7 on vdim
• superlocrian no 7 on idim
• dorian #4 no 7 on ivdim
• phrygian dominant no 7 on iiidim
• locrian #6 no 7 on vidim

not checked the others scale, seems have the same issue
the 7 indicate you played it with seventh chord, but it's a choice, you can play in a triad too, but if you know the formula of building chord or chord progression not everything is common e.g.
major scale/ionian mode
135 = ceg = c major scale (major)
125 = cdg = csus2 (suspended)
145 = cfg = csus4 (suspended)
1357 = cegb = cmaj7 (major)
1356 = cega = c6 (dominant)
etc

suggestion

• better to remove 7 on chord progression (recommended)
  or
• not have chord progression at all (not recommended, because chord in roman numeral is a big help for newbie)

thanks

nice to have degree on fretboard note labels (settings)
e.g. interval name to degree
1 = 1
m2 = b2
M2 = 2
m3 = b3
M3 = 3
4 = 4
d5 = b5
5 = 5
m6 = b6
M6 = 6
m7 = b7
M7 = 7

thanks

Currently doesn't work well on iPads. Layout is not preserved and scaled and the menus don't work.

can help harmonization guitarist (rhythm) to assist the melodic guitarist, or melodic guitarist to play arpeggio (broken chord) e.g. when song start to play in major pentatonic scale, the user know what suitable chord to match with the scale
the logic is on the interval that match between the scale and chord e.g.
major pentatonic scale degree = 12356
major chord degree = 135

so when melodic guitarist using major pentatonic scale, the rhythm guitarist can play it with major chord or another chord that match with major pentatonic degree, semitone or interval

thanks

in harmonic minor scale the chord progression should be :
Type
1 Minor
2 Diminished
3 Augmented (in current code it written as Major)
4 Minor
5 Major
6 Major
7 Diminished

Roman Numeral
i
iio
♭iii+
iv
V
♭VI
viio

Triad Chord
Cm
Ddim
E♭aug
Fm
G
A♭
Bdim

Seventh Chord
CmM7
Dm7♭5
E♭augM7
Fm7
G7
A♭maj7
Bdim7

not check the other, but i can send you the formula how to get the chord result if you want in doc or pdf file

when play in choir better to have octave name beside the note e.g. in standard choir usually use SATB (Sopran Alto Tenor Bass) which every vocal characteristic (male/female) has it's own range (base on octave)
e.g. which fretboard must be press to play melody with tenor vocal on major third tuning

the idea is to show the chord tone on fretboard that can be use to play arpeggio, something similar like the scale, but only show the chord tone
e.g. for major arpeggio (semitone : 0-4-7, degree : 1-3-5)
music-module.ts (not sure you want to implement this on the same module or create new)

    { name: "Major", intervals: new mod.Mod([true, false, false, false, true, false, false, true, false, false, false, false]), modes: [{ name: 'Major', index: 0}], defaultModeIndex: 0 },

thanks

can't add chromatic scale, already tried on music-module.ts
{ name: "Chromatic", intervals: new mod.Mod([true, true, true, true, true, true, true, true, true, true, true, true]), modes: [{ name: 'Chromatic', index: 0}], defaultModeIndex: 0 },

seems can't have the scale more than 10 notes
no error occured, but the result is not expected (the scale didnt change when click on chromatic scale drop down menu)

tuning-module.ts
// (open tuning, cross note tuning) : best to play harmonization or as rhythm guitar (playing chord with just minimal finger 1 or two)
{ tuning: "DFACEG", dots: guitarDots, description: "Dm9/11" },
{ tuning: "CGCDGC", dots: guitarDots, description: "Csus2" },
{ tuning: "DADEAB", dots: guitarDots, description: "D6sus2" },
{ tuning: "DADEAC", dots: guitarDots, description: "D7sus2" },
{ tuning: "DADFAD", dots: guitarDots, description: "Cross Note D" },
{ tuning: "DADFAB", dots: guitarDots, description: "Dm6" },
{ tuning: "DADFAC", dots: guitarDots, description: "Dm7" },
{ tuning: "DADGAD", dots: guitarDots, description: "Dsus4" },

// regular tuning, best to learn note because it's symetrical, another useful tuning is major third and minor third but right now your code cant support accidental note to add major third and minor third tuning
{ tuning: "BFBFBF", dots: guitarDots, description: "Augmented Fourths" },

// another bass standard tuning for 5th strings and 6 strings
{ tuning: "EADGC", dots: guitarDots, description: "Bass 5 Strings Standard High" },
{ tuning: "BEADG", dots: guitarDots, description: "Bass 5 Strings Standard Low" },
{ tuning: "BEADGC", dots: guitarDots, description: "Bass 6 Strings Standard" },

thanks

is there currently a way to build this project without using the vscode editor?

if not, I can rig one up.

I am having trouble styling colors because it seems the shapes (background fill) are not correlated with the note text (foreground text). E.G. maybe I'm missing something, but I cannot make the .tonic-button-selected fill = black and the .tonic-button-selected .tonic-text = white because there is no ID for the selected tonic text. Nor is the text contained in a container with the shape where I can cascade styles.

I would like to restyle a lot of the interface color-wise, but it seems I am limited to most text being one color.

OT:
This is an awesome tool -- I had extended a similar fretboard here tool in the past https://github.com/deltadada/Fretboard-Studies

I like your approach to the circle of fifths to set a lot of things. I feel the color hierarchy could use some improvements, a lot of which requires differentiating dark text on light bg vs. white text on dark bg. I have a hard time understanding color choices, e.g. the vii being an extremely eye-grabbing red.

Tested in Firefox 45.4.0.

Hovering on notes on any of the blocks (note-circle, fretboard, tonic) should light up all instances of that note

It would be helpful to be able to hear the chord that is currently displayed.

can't add tuning with accidental note, already tested add this on tuning-module.ts :

    { tuning: "G#CEG#CE", dots: guitarDots, description: "test0" },
    { tuning: "AbCEAbCE", dots: guitarDots, description: "test1" },
    { tuning: "A♭CEA♭CE", dots: guitarDots, description: "test2" },

what i expected ?
can add major thirds tuning that consists of G#-C-E-G#-C-E

ref:
https://en.wikipedia.org/wiki/Major_thirds_tuning

thanks

Notes such as B# (C) should be greyed out. While you can still build a scale on them, they are not normally used.

it's nice to have show the name of the chord when user click the note e.g.
c-e-g = C Mayor
a-c-e = A Minor
etc

thanks

1. Start on C at the top (this is more common than A, and aligns with wikipedia)
2. Display chords on chromatic circle (maj, min, dim, etc.), with fretboard map (which comes automatically I guess).

tried to change music-module.ts with :
export let naturals: Natural[] = [ { id: 0, index: 0, label: "C" }, { id: 1, index: 2, label: "D" }, { id: 2, index: 3, label: "E" }, { id: 3, index: 5, label: "F" }, { id: 4, index: 7, label: "G" }, { id: 5, index: 8, label: "A" }, { id: 6, index: 10, label: "B" } ];

but not sure it can affect the others aspect (chromatic, circle of fifth, guitar fretboard)

thanks

It should be possible to choose alternative tunings and/or instruments.

For example, if select C, E-flat, G, and B-flat, then it would display "Cm7" somewhere.

the idea is to have melodic guitarist to play scale in certain ways :

• 2 NPS (Note Per String)
• 3 NPS (Note Per String)
• Vertical (up down scale from lowest string into thickest string)
• Horizontal (the scale map into 1 strings only)
• Diagonal (the scale map diagonal, can be applied only on symmetrical tuning e.g. minor third, major third, augmented fourth)
• Full (the scale map on all fretboard, already have in guitardashboard.com)
• Double Stop (same like 'horizontal' above, but the user can select one more string (total strings shown : 2 strings) )
• Triple Stop (same like 'double stop' above, but the user can select one more string (total strings shown : 3 strings) )

add another parameter string to be input by user, because not every string have a same note (open string note) and add another button to select the method (2nps, 3nps, etc)

thanks

I see that module "tuning" has a programmable concept of dots.

    { tuning: "GDAE", dots: guitarDots, description: "Violin" },
    { tuning: "CGDA", dots: guitarDots, description: "Viola" },

For violin and viola there are no dots, but usually beginners have them "pasted on" on as:

String C: D E F G (C)

there's a lot of scales and tunings around the world, when people try to add it manually, seems the menu will take long (up & down), better to move the menu into html select tag
another advantage is user can reach the scales or tuning quicker than using menu by using their keyboard
what do you think ?

This is mostly for beginners, but I made a little POC here: https://damassi.github.io/gtr-cof/ (and https://github.com/damassi/gtr-cof/pull/1) which uses https://jtab.tardate.com/index.htm#examples under the hood. I'd be willing to PR back if of interest, (but this is probably something that most users already have memorized)

From @jm_fayard (twitter)
Could you add a settings to display the notes as Do Re Mi Fa So La Ti Do?
Yes C=DO, C#=DO#, Cb=DOb
For B, we actually call it SI (not Ti) in France/Italy/Spain

because of user behaviour (different for each person) better to save on cookies for :

• left handed fretboard (settings)
• flip nut (settings)
• set c to noon (settings)
• tunings
• scale

thanks

music-module.ts
edit

• the sequence of diatonic scale, because the 1st index on diatonic scale should goes to major scale / ionian mode
• rename the jazzminor into ascending melodic minor scale (source wikipedia), it's more common and the sequence between it's mode

add

let majorPentatonicModes: Mode[] = [
    { name: 'Major Pentatonic', index: 0 },
    { name: 'Egyptian', index: 2 },
    { name: 'Blues Minor', index: 4 },
    { name: 'Blues Major', index: 7 },
    { name: 'Minor Pentatonic', index: 9 },
];

let hirajoshiModes: Mode[] = [
    { name: 'Hirajoshi', index: 0 },
    { name: 'Iwato', index: 6 },
    { name: 'In', index: 11 },
];

let majorHexatonicModes: Mode[] = [
    { name: 'Major Hexatonic', index: 0 },
    { name: 'Minor Hexatonic', index: 2 },
];

let diatonicModes: Mode[] = [
    { name: 'Major / Ionian', index: 0 },
    { name: 'Dorian', index: 2 },
    { name: 'Phrygian', index: 4 },
    { name: 'Lydian', index: 5 },
    { name: 'Mixolydian', index: 7 },
    { name: 'N Minor / Aeolian', index: 9 },
    { name: 'Locrian', index: 11 },
];

let doubleHarmonicMajorModes: Mode[] = [
    { name: 'Double Harmonic Major', index: 0 },
    { name: 'Lydian ♯2 ♯6', index: 1 },
    { name: 'Ultraphrygian', index: 4 },
    { name: 'Hungarian / Gypsy Minor', index: 5 },
    { name: 'Oriental', index: 7 },
    { name: 'Ionian ♯2 ♯5', index: 8 },
    { name: 'Locrian ♭♭3  ♭♭7', index: 11 },
];

let harmonicMajorModes: Mode[] = [
    { name: 'Harmonic Major', index: 0 },
    { name: 'Dorian ♭5', index: 2 },
    { name: 'Phrygian ♭4', index: 4 },
    { name: 'Lydian ♭3', index: 5 },
    { name: 'Mixolydian ♭2', index: 7 },
    { name: 'Lydian Augmented #2', index: 8 },
    { name: 'Locrian ♭♭7', index: 11 },
];

let harmonicMinorModes: Mode[] = [
    { name: 'Harmonic Minor', index: 0 },
    { name: 'Locrian ♯6', index: 2 },
    { name: 'Ionian ♯5', index: 3 },
    { name: 'Dorian ♯4', index: 5 },
    { name: 'Phrygian Dominant', index: 7 },
    { name: 'Lydian ♯2', index: 8 },
    { name: 'Superlocrian', index: 11 },
];

let ascendingMelodicMinorModes: Mode[] = [
    { name: 'Ascending Melodic Minor', index: 0 },
    { name: 'Assyrian', index: 2 },
    { name: 'Lydian Augmented', index: 3 },
    { name: 'Lydian Dominant', index: 5 },
    { name: 'Mixolydian ♭6', index: 7 },
    { name: 'Locrian ♮2', index: 9 },
    { name: 'Altered scale', index: 11 },
];

let diminishedModes: Mode[] = [
    { name: 'Whole Half Diminished', index: 0 },
    { name: 'Half Whole Diminished', index: 2 },
];

let majorBebopModes: Mode[] = [
    { name: 'Major Bebop', index: 0 },
    { name: 'Harmonic Minor Bebop', index: 9 },
];

let dominantBebopModes: Mode[] = [
    { name: 'Dominant Bebop', index: 0 },
    { name: 'Locrian Bebop', index: 4 },
    { name: 'Dorian Bebop', index: 7 },
];

export let scaleFamily: ScaleFamily[] = [
    { name: "Major Pentatonic", intervals: new mod.Mod([true, false, true, false, true, false, false, true, false, true, false, false]), modes: majorPentatonicModes, defaultModeIndex: 0 },
    { name: "Hirajoshi", intervals: new mod.Mod([true, false, false, false, true, false, true, true, false, false, false, true]), modes: hirajoshiModes, defaultModeIndex: 0 },
    { name: "Major Hexatonic", intervals: new mod.Mod([true, false, true, false, true, true, false, true, false, true, false, false]), modes: majorHexatonicModes, defaultModeIndex: 0 },
    { name: "Augmented", intervals: new mod.Mod([true, false, false, true, true, false, false, true, true, false, false, true]), modes: [{ name: 'Augmented', index: 0}], defaultModeIndex: 0 },
    { name: "Blues", intervals: new mod.Mod([true, false, false, true, false, true, true, true, false, false, true, false]), modes: [{ name: 'Blues', index: 0}], defaultModeIndex: 0 },
    { name: "Prometheus", intervals: new mod.Mod([true, false, true, false, true, false, true, false, false, true, true, false]), modes: [{ name: 'Prometheus', index: 0}], defaultModeIndex: 0 },
    { name: "TriTone", intervals: new mod.Mod([true, true, false, false, true, false, true, true, false, false, true, false]), modes: [{ name: 'TriTone', index: 0}], defaultModeIndex: 0 },
    { name: "Whole Tone", intervals: new mod.Mod([true, false, true, false, true, false, true, false, true, false, true, false]), modes: [{ name: 'Whole Tone', index: 0}], defaultModeIndex: 0 },
    { name: "Diatonic", intervals: new mod.Mod([true, false, true, false, true, true, false, true, false, true, false, true]), modes: diatonicModes, defaultModeIndex: 0 },
    { name: "Double Harmonic Major", intervals: new mod.Mod([true, true, false, false, true, true, false, true, true, false, false, true]), modes: doubleHarmonicMajorModes, defaultModeIndex: 0 },
    { name: "Harmonic Major", intervals: new mod.Mod([true, false, true, false, true, true, false, true, true, false, false, true]), modes: harmonicMajorModes, defaultModeIndex: 0 },
    { name: "Harmonic Minor", intervals: new mod.Mod([true, false, true, true, false, true, false, true, true, false, false, true]), modes: harmonicMinorModes, defaultModeIndex: 0 },
    { name: "Ascending Melodic Minor", intervals: new mod.Mod([true, false, true, true, false, true, false, true, false, true, false, true]), modes: ascendingMelodicMinorModes, defaultModeIndex: 0 },
    { name: "Diminished", intervals: new mod.Mod([true, false, true, true, false, true, true, false, true, true, false, true]), modes: diminishedModes, defaultModeIndex: 0 },
    { name: "Major Bebop", intervals: new mod.Mod([true, false, true, false, true, true, false, true, true, true, false, true]), modes: majorBebopModes, defaultModeIndex: 0 },
    { name: "Dominant Bebop", intervals: new mod.Mod([true, false, true, false, true, true, false, true, false, true, true, true]), modes: dominantBebopModes, defaultModeIndex: 0 },
    { name: "Melodic Minor Bebop", intervals: new mod.Mod([true, false, true, true, false, true, false, true, true, true, false, true]), modes: [{ name: 'Melodic Minor Bebop', index: 0}], defaultModeIndex: 0 },
    { name: "Phrygian Dominant Bebop", intervals: new mod.Mod([true, true, false, false, true, true, false, true, true, false, true, true]), modes: [{ name: 'Phrygian Dominant Bebop', index: 0}], defaultModeIndex: 0 },
];

thanks

Any tunings selection is lost on page refresh. Store the current tunings in a cookie.

Refresh page, mode button not highlighted.

Using an A# results in having two "A" notes in your scale, which is to be avoided.

Use a cookie to preserve the current state.

on diatonic scale : major / ionian scale
when click on A as root note show B♭ while rest of accidental note using #
when click on B as root note show all of accidental note using #

suggestion better to have a button (in the middle of chromatic and cof) so that user can choose the accidental sign ♭ or #

thanks

When you click the note numbers (1, 3, 5, etc.), the note displays on the two circles and the fret board below do not update immediately. When you select notes on the circles, the numbers do not update.

Thanks for your excellent tool!

I think it would be nice to have a different set of note names - Italians use "Do re mi fa sol la si", Germans use H instead of B but have different names for e.g. C#.

the 8 semitone :
in whole tone scale is written as A5 stand for augmented fifth
in diatonic is written as m6 stand for minor sixth

yet the semitone is same, but the name is not standard, perhaps you can have a button to choose the interval name
Minor, major, or perfect intervals
and
Augmented or diminished intervals

ref:
https://en.wikipedia.org/wiki/Interval_(music)#Main_intervals

thanks