Hydrogen: Make noteKey more visible by adding a white outline

[Porrumentzio]

Currently, when editing note keys on its editor, when putting a note on the black keys on the piano roll, they get unseeable:

Adding a white outline or something similar would solve this problem.

[cme]

Perhaps this could be best done by lightening the sharp/flat background colour, to match the piano roll editor?

[mauser]

Ah, yes. The colors are really unfortunate :(

[cme]

Some options:

White circle background:

Alternating black / white notes for contrast:

Lighter background on the sharps & flats:

[trebmuh]

I prefer the "Lighter background on the sharps & flats" (the last one). The 2 others are more "aggressive" to my eyes.

[Porrumentzio]

I like the second one but it's too hard in contrast.
So I think third option would be better.

Anyway, I propose three changes:

1. Make the sharp/flat keys end more abruptly, not with current lighter border.
2. Make the notes on sharp/flat keys the same size as others (bigger). I think it has to see with the first proposal.
3. Add key names at the left. If user does not know piano very well, it is easier this way.

[cme]

@Porrumentzio Good ideas, I'll try those and see how they look.

[cme]

I like this a lot better! It's much cleaner and easier to follow I think.

[trebmuh]

It is very nice like that.
Can you make the ABCDEFG be translatable then I can make these Do Ré Mi Fa Sol La Si (as an example in French)? Thank you

[cme]

Can you make the ABCDEFG be translatable then I can make these Do Ré Mi Fa Sol La Si (as an example in French)?

Done. The same thing should probably be done at some point in the piano roll editor I guess, since it also annotates rows with note names?

[trebmuh]

The same thing should probably be done in the piano roll editor I guess?

Yes, it'd be very useful for the non English notation users.

[Porrumentzio]

Good for internazionalitation!

I like the new look and I have more proposals:

1. Notes on sharp keys look a bit tinier than others. Could they be exactly same size?
2. I would like to see how it looks having sharp keys darker (almost black) and notes brighter (inverting the colors). I'm not sure about this anyway
3. Although the black outlines on the keys of piano roll make it look old-fashioned, I think they look clearer that way. What do you think?

[cme]

1. Notes on sharp keys look a bit tinier than others. Could they be exactly same size?

They're technically the same size with this change, pixel-for-pixel, but the grey background of the sharps being closer to the outline colour makes it appear smaller. The same thing would happen unless the outline were a contrasting colour. I might try an explicitly dark pen colour to see if that minimises the effect.

1. I would like to see how it looks having sharp keys darker (almost black) and notes brighter (inverting the colors). I'm not sure about this anyway
2. Although the black outlines on the keys of piano roll make it look old-fashioned, I think they look clearer that way. What do you think?

I will try those when I can get the time but from the first set I tried, the alternating colours seemed the most jarring of the bunch so I don't hold much hope for it!

[trebmuh]

Re: 1, @cme what if you add the same black horizontal lines than in :

?

[cme]

Keeping visual similarity with the piano roll editor is probably a good idea anyway.

(I'm going to ignore the increasing temptation to refactor them to use the same code though!)

[cme]

Black lines, black-edged note:

I think this addresses all the issues and looks much better and clearer. Any objections? :)

[trebmuh]

No objection from me, it looks very good like that.

_PS: don't refrain your temptation too much :wink:_

[cme]

Pushed to master. Thanks for the focus group everyone! :)