Note size

[josvanr]

Hello!

I really enjoy using your webiste/app. One issue I have with it though, is the size of the notes. The notes seem to float a bit between the note lines, ie there is a small amount of space between the note itself and the line. In regular sheet music this is not the case and it makes chords in the app/website look off. In regular (all) sheetmusic, eg a triad ceg will look like a closed stack of notes, whereas in your app there is space between the notes. Some intervals can look off a bit sometimes. Eg in the treble clef, the interval g-c with c sitting on the first ledger line above the staff, kind of resembles a 5th at first glance, at least to me, when I judge the interval only from the spacing between the notes. Only when observing that one note sits on a line, and the other between 2 lines, I realize that it is a 4th. I think it would be better for students to see an exact representation of the notes, as they will see in actual sheet music.

Anyhow, dont know if you want to adapt this or how difficult it is. I think I'll try for myself to adapt this in the source code...

Kind regards!

[josvanr]

hmm getting this to work locally is not so easy, apparently (on ubuntu 18.04). Is anyone working on this? I just tried it again via the website. In principle, it works great, only the intervals in a chord just look off. A 4th kind of looks like a 5th, a 5th looks like a 6th.. annoying. I think it is not good to leave it like this: if one uses this to learn how to recognize intervals, you are imprinted with the wrong look, and then in actual sheetmusic it will look entirely different... bummer..

if anyone knows a not too difficult way to get this to work locally, I'd be iterested to hear!

---

A quick additional note: I found a way to modify the size of the notes in the online app, just by editing the css file in the chrome devtools. One can select the object (the note) and then adjust the height. Setting the height to 115% instead of 100% makes the notes look more or less like they do on real sheet music. They do shift down a pixel then.. dont know how to correct that...

[leafo]

If you could provide screenshots of what's there and what you want that would be helpful.

You may also want to check if changing the zoom level on your browser helps or not

[josvanr]

hi Leafo,

thnx for replying, its great to hear you are still working on the app! Past couple of days I've been using it, and it really works. I think the fact that the notes just keep coming, gets me in a 'flow state' that really enhances learning.

See attached image for the comparison. The image in the bottom is an excerpt from a typical piano score. As you can see, the notes are stacked more compactly, without space inbetween them. Eg in a 3rd interval, the notes sit right on top of eachother. In a 4th interval, there is some room between the notes, but not enough to fit another one inbetween. In a 5th interval, there is just enough room to fit another one inbetween. Thus one can recognize intervals, by just looking at the size of the space inbetween the notes, without even looking at if they are on top of a line or inbetween 2 lines. In the app, I tend to confuse 4th and 5th intervals. (see explanation in image).

I tried to look into the source code to modify this, but couldn't get the app to compile/run (on my ubuntu 18.04). I did manage to kind of get it to look right in chrome, using devtools (shift ctrl j) and editing the css in the online running app. See second attachment. I changed the height of the notes to 115%, then it looks kind of right, though there still is a pixel of space between the notes that doesn't go away.

Anyway, for me it is usable like this; the perception of the intervals is the same as in actual sheet music now.

Ok, thnx again, and I hope this is an easy modification to make your app better. I for one will be using it a lot :)

kind regard,

Jos van Riswick

[josvanr]

hello!

I've been using the app a lot in the past couple of days, and have maybe another idea to improve the basic function: the notes presented in the staff to play, directly disappear when the correct keys are hit. So then the finger presses a note on the keyboard, but that note is no longer visible in the score. I think it would be good to still be able to see the note, until the finger is released (maybe in a greyed form), so that one can better learn to associate the visual image with the tactile experience. This also allows one to learn to associate the audible interval between consecutive notes with distance between the previous and next note on the screen. ..

thnx!

Jos

On Fri, Oct 16, 2020 at 2:19 PM Jos van Riswick josvanr@gmail.com wrote:

hi Leafo,

thnx for replying, its great to hear you are still working on the app! Past couple of days I've been using it, and it really works. I think the fact that the notes just keep coming, gets me in a 'flow state' that really enhances learning.

See attached image for the comparison. The image in the bottom is an excerpt from a typical piano score. As you can see, the notes are stacked more compactly, without space inbetween them. Eg in a 3rd interval, the notes sit right on top of eachother. In a 4th interval, there is some room between the notes, but not enough to fit another one inbetween. In a 5th interval, there is just enough room to fit another one inbetween. Thus one can recognize intervals, by just looking at the size of the space inbetween the notes, without even looking at if they are on top of a line or inbetween 2 lines. In the app, I tend to confuse 4th and 5th intervals. (see explanation in image).

I tried to look into the source code to modify this, but couldn't get the app to compile/run (on my ubuntu 18.04). I did manage to kind of get it to look right in chrome, using devtools (shift ctrl j) and editing the css in the online running app. See second attachment. I changed the height of the notes to 115%, then it looks kind of right, though there still is a pixel of space between the notes that doesn't go away.

Anyway, for me it is usable like this; the perception of the intervals is the same as in actual sheet music now.

Ok, thnx again, and I hope this is an easy modification to make your app better. I for one will be using it a lot :)

kind regard,

Jos van Riswick

On Thu, Oct 15, 2020 at 11:58 PM leaf notifications@github.com wrote:

If you could provide screenshots of what's there and what you want that would be helpful.

You may also want to check if changing the zoom level on your browser helps or not

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/leafo/sightreading.training/issues/91#issuecomment-709612141, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIOCWWNJX6RDI6CL6O3WOFDSK5WAZANCNFSM4SSIA5AA .

[ekp77]

Hello, I found the Sight Reading Trainer website just recently. I like it. In the "Staff" section I started with single notes which works well. Now I switched to practicing triads. I totally support Jos' initial request to adjust the size of the note heads. They are way to small compared to the line spacing, which creates a wrong spacing between stacked notes. This makes it harder to identify chords and chord inversions, if not impossible in some cases.

In standard notation note heads in spaces touch the lines. Also note heads with an interval of a third should touch each other.

Thanks to Jos' description of a workaround I manipulated some parameters in the browser developer tools. I did the following to improve the layout:

1) Change "whole_note" height from 20% to 25% -> This creates the perfect size in relation to the spaces between the lines. But other then the change of the "noteheads" height as described before, there is no downshift of the note heads. They are correctly on the lines or in the spaces.

2) Change "g_staff" margin-bottom from 70px to 60px (or 0px) when using the grand staff -> This removes the extra spacing above the bass staff. It improves the readability of chords across the bass staff and treble staff, e.g. when the note middle-C is involved.

I attached two screenshots to compare the layout before and after the changes. As you can see, in the original setting it's impossible to identify the first chord a first inversion triad, because of the wrong spacing. It looks more like two stacked 4th intervals.

Original layout:

Adjusted layout:

It would be great if you could change the standard layout on the website accordingly. This would give the users a much better experience by meeting the notation standards.

Best regards, Frank