Feature Request: Fretboard improvements for better learning

[nicolagranata]

Request: automatic note text color for "Note color" with "Display Note Text" ON:

• if i use "yellow" for note color for more contrast on dark fretboard without "Display Note color", when i enable "Display Note Text", on white background, yellow is unreadable;
• E.g. use Note Color as "background color" of note and if this color perceptive luminance >=128 (in 255 range), note text color is black/dark (custom color), else is white/light (custom color): -- Note Color -> Yellow / Note Text -> Black; -- Note Color -> Blue / Note Text -> White.

Request: The rectangular shape with "Display Note Text" ON is ugly: is possible to show note inside a circle?

Request: show bending on fretboard (using same symbols as tabs) or move up the shape of note with arrows tath show the range of bend (more bend = more slide up arrow), and animated change color (custom color / glow color / light color) for note with bending up (change color) and release (return to original color)

Request: Show/Hide frets number with general color customization and presets (top/bottom):

• all numbers;
• only standard ref numbers (eg, 3/5/7/9/12 ... etc etc) ,
• all numbers with reference numbers highlighted (and highlighted color customization)
• custom numbers ( eg. 5/9/12)
• Position: top, bottom, inside fretboard between 3 and 4 string, or inside fret markers

Request: Misc.

• option to show 12/21/22/24 frets (or custom number) ;
• option to chose size of note circle on fretboard;
• option to automatic / custom vertical fretboard resize to prevent overlapping of notes over strings in same fret or for more readability;
• option to horizontal resize fretboard inside window (with window maximized on 34" display, fretboard is not user friendly);
• option to improve frets interval sizing to reduce the flat effect (all frets with same size) on large display;
• options to move fretboard up /down on UI or left/right (with 90 degress rotation);

[guiv42]

Addressed by PR #484:

automatic note text color for "Note color" with "Display Note Text" ON (...) The rectangular shape with "Display Note Text" ON is ugly: is possible to show note inside a circle?

@nicolagranata (and every user reading this) : I would appreciate some feedback before merging. Here are a few screenshots (done on a 12.5'' display)

default configuration, display note text ON, basic C chord, current version: with PR:

Same C chord, with note color set to yellow, current version: with PR:

A complete scale, with default color, current version: with PR:

[nicolagranata]

Yes, that's exactly what I meant! Thank you!

With your examples you also pointed out to me that the notes to be played on the open string (capo) should be visually distinct from the notes to be played on the frets.

If you deem it appropriate, keep in mind, in a future version, that it would be useful to be able to select a specific color for the notes on the empty string (nut), or do it automatically using the complementary color for the circle or thick colored edges for the circle, or with opacity set to 50% - 75% or whatever may be useful for distinguishing open notes. When learning a solo, this distinction allows for a more intuitive discernment of the use of the fingers.

Thanks again and I wish you good work!

Best Regards

Nicola

---

Da: guiv42 @.> Inviato: sabato 3 agosto 2024 23:56 A: helge17/tuxguitar @.> Cc: Nicola @.>; Mention @.> Oggetto: Re: [helge17/tuxguitar] Feature Request: Fretboard improvements for better learning (Issue #461)

Addressed by PR #484https://github.com/helge17/tuxguitar/pull/484:

automatic note text color for "Note color" with "Display Note Text" ON (...) The rectangular shape with "Display Note Text" ON is ugly: is possible to show note inside a circle?

@nicolagranatahttps://github.com/nicolagranata (and every user reading this) : I would appreciate some feedback before merging. Here are a few screenshots (done on a 12.5'' display)

default configuration, display note text ON, basic C chord, current version: C_default_old.png (view on web)https://github.com/user-attachments/assets/5414962c-0c6d-423e-b8b8-4833ad6df7e2 with PR: C_default.png (view on web)https://github.com/user-attachments/assets/9f39fb53-58b3-460e-8ab3-999abf12dcdd

Same C chord, with note color set to yellow, current version: C_yellow_old.png (view on web)https://github.com/user-attachments/assets/333a6174-cf24-4a6f-b832-7eb0fae621fc with PR: C_yellow.png (view on web)https://github.com/user-attachments/assets/b19ecc7e-44ab-49fe-8604-613d8630f5d7

A complete scale, with default color, current version: scale_old.png (view on web)https://github.com/user-attachments/assets/89a4758d-4584-4df4-b7a7-32a78403c122 with PR: scale.png (view on web)https://github.com/user-attachments/assets/089a3d3d-662f-48f6-93b3-f00d8d89008b

— Reply to this email directly, view it on GitHubhttps://github.com/helge17/tuxguitar/issues/461#issuecomment-2267170645, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ALWU62PPFRYHW5I7BJ74MG3ZPVG2PAVCNFSM6AAAAABKZ2X7MCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRXGE3TANRUGU. You are receiving this because you were mentioned.Message ID: @.***>

[guiv42]

@nicolagranata , one more question. What do you mean exactly by

option to automatic / custom vertical fretboard resize to prevent overlapping of notes over strings in same fret or for more readability

I found in the code that there is an option to define the vertical size of fretboard. It is defined in user configuration file (on Linux: ~/.config/tuxguitar/config/tuxguitar.cfg) by parameter fretboard.string-spacing=20. But as far as I know there is no user interface to modify this parameter from the application. It should be quite easy to add, but I don't know if this corresponds to your request.

[nicolagranata]

Yes, I tried. this is exactly what I meant.
It would be useful if this value could be adapted automatically based on the size of the circles (which depends on the size of the font) or even manually based on the readability that everyone wishes to have during the learning phase.

I found it much easier to learn using the fixed on-screen keyboard, rather than just reading tabs.

One more thing: on 34" monitors the horizontal dimension of the fretboard at 100% is much larger than the physical keyboard. This is convenient, however, again as a matter of personal taste/need, you could introduce a selector that allows the keyboard to be at 100% size of the window and the keyboard at real physical size (stratoaster type / gibson type)?

In a large monitor (34" -> 80cm), when the window is maximized, the monitor size of the 24 fret fretboard (stratocaster type) should stop at max ~ 48cm (22 frets, ~46cm - then maybe I'll try the dimensions of the 22nd and 23rd frets), while, when the size of the window is narrower than the actual size of the neck, the fretboard takes on 100% dimensions.

On a common 24" monitor, the dimensions of the 100% fretboard are almost identical to those of physical fretboards.

I understand that the correspondence between the real physical size and that of the virtual fretboard may also depend on the DPI of the monitor, however you could leave some fine-tuning selectors.

Thanks again!

Best Regards

Nicola

[guiv42]

Targeting consistency with physical dimensions does not seem realistic to me, there are too many parameters. But it should be possible to give more control to user. The most efficient should be to make fretboard vertically resizable with mouse, but it seems also quite complex to implement (at least too complex for me). The simplest alternative I can suggest is to add 2 buttons to increase/decrease vertical size of fretboard, next to the existing "settings" button. Here is a mock-up of what it could look like (only 1 button, for test). In video, initial value of fretboard.string-spacing is 12, each click increases by 2

https://github.com/user-attachments/assets/b223f4eb-aa9b-4da8-8c91-b3918e512a86

If this proposal seems reasonable to you, a few questions:

• @nicolagranata : could you please give me the value you would use for this parameter on your huge 34'' display? (to help me define a maximum value)
• @helge17 : do you think you could create the 2 required icons?

[nicolagranata]

Yes! your proposal is ok for me!

Of course, I also have various parameters for calculating the size of the keys. For ease of calculation you can use a 24-key keyboard: the 24 fret fretboard is exactly 3/4 of the total string length from nut to bridge and depends on the type of guitar/bass model.

• Stratocaster type guitar: 647.7mm -> fingerboard: 485.78 mm
• Gibson type guitar: 628.65 mm -> fretboard: 471.48 mm
• Generic bass guitar: 863.6 mm -> fretboard: 647.47 mm With these parameters you may already have everything you need. to obtain the values ​​in inches, divide the values ​​I have just shown by 2.54.

I have built, in these last 2 days, an interactive JavaScript / CSS demo that might be useful to you. It is continuously updated, the code is visible in its entirety (press F12) and I have made the parameters of each selection visible in the window at the bottom of the page.

https://monsterman.it/fretboard/

see next message

[nicolagranata]

Sorry for the somewhat long answer.

To get the physical dimensions of the monitor you should access the Windows WMI values ​​from TuxGuitar, precisely: WMI namespace: root\WMI WMI Class/Query: WmiMonitorBasicDisplayParams

In the "MaxHorizontalImageSize" and "MaxVerticalImageSize" columns I can see the physical dimensions of my monitors (in my Win10 ITA they are expressed in cm - I checked, measuring tape in hand, and they correspond)

By performing a simple proportion between the dimensions and the detected monitor resolution, you will be able to represent the keyboard at the correct physical dimensions on the monitor (or almost - I noticed some discrepancies at 110ppi, but this could be due to the browser, while in the 24" they are corresponding).

Alternatively, you can insert a field in which the user can type the size of the monitor and then perform a calculation based on the declared dimensions (which I will also do in a few minutes in my demo).

At this time, the keyboard size is based on 92ppi monitors (24" 1920 1080), if the monitor has a lower density (e.g. 27" 1920 1080 -> 82) or higher (e.g. 34" 3440 * 1440 -> 110 ppi) an adaptation must be performed.

To determine the length of 19 (classical guitar), 21 or 22 frets (any number of frets), you must use a cycle of divisions of the string length by the constant 17.817152.

I attach an adapted excerpt of the code I used (JavaScript) and which you can find complete and working at the address https://monsterman.it/fretboard/ (press F12 in the browser to see the complete code);

` / JAVASCRIPT /

var glob_env = {
    "neck_divisor_const": 17.817152,
    "decimals": 2,
}

var guitar_data_obj = {
    "name": "Stratocaster",
    "scale_width": 647.7, // value in mm
    "frets": 24,
}

function get_neck_data(guitar_data_obj) {
    var neck_size = 0;
    var decimals = glob_env[ "decimals" ];
    // frets size storage
    var fret_box_sizes_ra = [];
    // guitar scale (string length from nut to bridge)
    var scale_width = guitar_data_obj[ "scale_width" ];
    // number of frets
    var frets_number = guitar_data_obj[ "frets" ];
    // neck divisor:
    var neck_divisor_const = glob_env[ "neck_divisor_const" ];
    for (var i = 0; i < frets_number; i++) {
        fret_box_size = Number(scale_width / neck_divisor_const);
        fret_box_sizes_ra.push(fret_box_size.toFixed(decimals));
        // new scale_width
        scale_width -= fret_box_size;
        // increment neck_size usign cyclic single fret width
        neck_size += fret_box_size;
    }
    var obj = {
        "neck_size": neck_size.toFixed(decimals),
        "fret_box_sizes": fret_box_sizes_ra,
    }
    console.log(obj);
    return obj;
}

get_neck_data(guitar_data_obj);

`

[guiv42]

Probably my preceding message was not clear. I have no intention to deeply rework the graphical layout of fretboard in TuxGuitar. Neither do I target any consistency with physical instruments dimensions. There are really too many parameters:

• instrument type: acoustic or electric guitar / bass, banjo, mandolin, ...
• display size and density
• graphical framework used (JFX/SWT)
• operating system: graphical rendering significantly differs for Linux/Windows/MacOS, interfaces to retrieve display characteristics also.
• ...

So:

• horizontally:
  • size of fretboard is aligned on window size. This will not change
  • number of displayed frets will become configurable in a future major release
• vertically: I propose to add controls so you can adapt vertical size to your display, manually

But it's difficult for me to imagine how the fretboard looks like on your 34'' display (mine is 12.5'' !). Could you tell me what value of fretboard.string-spacing correctly fits to your display?

[nicolagranata]

OK! I set fretboard.string-spacing=40 in 34" ~ 43mm (the real size of fretboard at nut) in 24" the same value correspond to ~ 50mm

[helge17]

PR #484 looks very good, just merge it, thanks!

@helge17 : do you think you could create the 2 required icons?

Of course I will take care of the icons. Perhaps you could use zoom_in.png and zoom_out.png at first, and I'll replace them with suitable icons afterwards.

[guiv42]

Perhaps you could use zoom_in.png and zoom_out.png at first

done (#487)

Notes:

• I also reused the toolTipText, I'm not sure it's worth creating new translatable strings for that
• I did not add any button "reset to default"