Piano Roll Black Keys Contrast

[tresf]

It is too hard to tell when a black key is being pressed or not in the piano roll.

Although this may seem minor when clicking with the mouse, this is much more severe when using the typing keyboard as the notes being played are much less obvious from a UI perspective.

[vlad0337187]

Maybe to make something like in Linux Sampler's Fantasia GUI ? I mean to highlight it with color, which fits LMMS theme.

[musikBear]

It is too hard to tell when a black key is being pressed or not in the piano roll.

@tresf , thats in the new Rebecka theme, right? Because in .90 it looks different G & G# pressed. Would the kb from .90 look very wrong in 'Rebecka' ? To me the pressed keys looks next to natural

[Umcaruje]

Agreed. The pressed black keys need more contrast.

[RebeccaDeField]

Thank you for pointing this out @tresf. I agree and I'll take care of this :)

[RebeccaDeField]

@tresf @Umcaruje @musikBear

Updated black keys to be much lighter and pressed keys to be much darker. I believe the contrast in this one is about as clear as the previous theme now.

Before, for comparison:

[Spekular]

Its visible now, but the contrast is still somewhat low. If you want to avoid making the rest of the notes lighter, perhaps there could be a highlight on the played note similar to this?

[musikBear]

@RebeccaDeField Yes it is clearER, but from a semi 'bat' pow i have to agree partly with @Spekular, it is not enough difference. However the highlight idea, i do not like, that is too much, imo.

Perhaps a rethinking of what 'white keys' and 'black-keys' actually mean, is all that is needed, because imo it only means difference. So the keyboard could have 'black' keys that unpressed was only ~50 rgb different from 'white', and then be black when pressed. That would give clean difference, both in idle, and press event

So mocked up without shading

What does all you other think?

[vlad0337187]

@musikBear , I better like idea with color highlighting.

@Spekular , I had such, is it Casio LK-215 ?)

[Spekular]

@vlad1777d Casio LK-230

[Umcaruje]

I personally dislike the colored piano idea, as I think it wouldn't really fit with the current theme.

@RebeccaDeField I think it should be the other way around, that pressed keys are lighter. Also, as a lover of all things flat, a flat piano like in musikbear's mockup would be fine by me :+1:

[RebeccaDeField]

I will mockup both a lighter piano as is and a colored piano, a simpler piano with black keys darker by default and one with even lighter keys by default. It really won't be that hard for me to play around with and because sometimes the ideas I don't think will work turn out the best and vice versa so I like to give all the ideas a chance :)

[RebeccaDeField]

1. Colored pressed key idea:
2. LED light up pressed key idea:
3. @musikBear's lighter unpressed keys idea:
4. @Umcaruje's light pressed and dark unpressed flat design piano idea:

Thoughts? Opinions?

[mikobuntu]

I prefer the coloured pressed key idea.

[Spekular]

I was actually thinking more along the lines of the first mockup than the second. I figured a green or blue would fit well, so I like it!

[eagles051387]

I like the first mockup for this :)

Sent from my iPhone

On 02 Oct 2016, at 10:34, Spekular notifications@github.com wrote:

I was actually thinking more along the lines of the first mockup than the second. I figured a green or blue would fit well, so I like it!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[musikBear]

@vlad1777d suggestion is an essence the same as Umcaruje's, it just a different color, but i fear that the flickering colors would be more annoying, if the changes are from black to green or white to green :) @RebeccaDeField The subtle way you made @Spekular suggestion looks lovely, but i always think about CPU-usage, and having these lights on all keys, simply must use cpu (one object for each and the logic to go with it) For the sake of keeping the cpu-usage in UI as low as possible, i will still prefer @Umcaruje or my own, because that can be implemented as a simple boolean control; Only two sprite-states, each with its own sub-sprite.

[BaraMGB]

@musikBear

but i always think about CPU-usage, and having these lights on all keys, simply must use cpu (one object for each and the logic to go with it) For the sake of keeping the cpu-usage in UI as low as possible

because that can be implemented as a simple boolean control; Only two sprite-states, each with its own sub-sprite.

such guesses are not helpful.

[vlad0337187]

@RebeccaDeField , you're wrong, my idea was the same, as @Spekular 's idea =) (on that image, that I posted here: https://github.com/LMMS/lmms/issues/3018#issuecomment-245907018 , black key had led-like light. I had Casio LK-215 keyboard, so I prefer led-like light on keys.

I vote for second.

But in second variant led is too close to the edge of key. I think, that it would be better to move it a little more to the center. If you'll give me source of image, than I could try different variants too. Thank you.

@musikBear , I think that if it'll be done like 2 images, that change each other, than it'll not use much cpu. In Linux Sampler (from where I took screenshot) was done so.

[RebeccaDeField]

@vlad1777d @Spekular I updated my comment so we don't have any confusion over who's idea was whos ;) Source for piano roll mockups: PianoRoll.zip

@musikBear In the LED idea with the more subtle green, I was imagining that exported pressed keys would be exported with the glow in one .png which would not increase CPU usage.

[Umcaruje]

@BaraMGB

@musikBear

but i always think about CPU-usage, and having these lights on all keys, simply must use cpu (one object for each and the logic to go with it) For the sake of keeping the cpu-usage in UI as low as possible

because that can be implemented as a simple boolean control; Only two sprite-states, each with its own sub-sprite.

such guesses are not helpful.

Not to mention that its completely wrong. We draw pixmaps, it doesn't matter if the pixmap has 1 color or 16 million, the CPU usage is the same, or the difference is so insignificant that we don't need to talk about it, nor it should affect design decisions.

[RebeccaDeField]

I still really appreciate @musikBear always being concious about CPU usage as that is very important, it's just not a problem in this case :+1:

Just realized that I never mentioned which were my personal favorites which are options 2 and 3.

[Umcaruje]

Yeah, my comment might have gotten out a bit too harsh. Sorry about that @musikBear

On 2 Oct 2016 22:44, "Rebecca DeField" notifications@github.com wrote:

Not to mention that its completely wrong.

I still really appreciate @musikBear https://github.com/musikBear always being concious about CPU usage as that is very important, it's just not a problem in this case 👍

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LMMS/lmms/issues/3018#issuecomment-250994654, or mute the thread https://github.com/notifications/unsubscribe-auth/AF_bPUifZh5XuCS6z-RqB4tO8UAIglGQks5qwBemgaJpZM4J0nYu .

[RebeccaDeField]

@tresf's Would love to hear your input on this as well as you opened the issue. Would any of the options above solve difficulties you brought up here?

@Umcaruje do you prefer option number 4?

@BaraMGB Feel free to chime in as well. You usually have opinions about the theme orientated decisions.

[musikBear]

Il not comment on anything but the fact that i did not realise that the diode-solution ALSO could be implemented with a dual-sprite, so there is no difference at all from Umraruje, Vlads Speculars or mine, they are in respect to cpu and implementation identical. I may regret this, but i do think @Spekular kb-lights as subtle diode looks just sexy, the way @RebeccaDeField has made it. I like that :)

[Umcaruje]

I'm leaning towards option 3. as well, but if we keep it this subtle. I still think the unpressed keys should be a bit darker though.

@Umcaruje do you prefer option number 4?

After looking at I don't believe it looks natural, so no. I thought it would look better but it doesn't.

[Spekular]

@Umcaruje just to double check, you mean that the unpressed keys should be darker and the pressed stays the same?

That would move us back towards where we started, with very low contrast.

@vlad1777d Re: " in second variant led is too close to the edge of key"

[Umcaruje]

[vlad0337187]

@RebeccaDeField , I thought about something with little more volume:

Updated: PianoRoll_2.svg.zip

[grejppi]

How it's done in the single window concept looks very nice to me:

The double borders are also consistent with how TCOs look

[BaraMGB]

I'm with @grejppi here.

[Spekular]

mikobunto, eagles051387, and myself all liked rebecca's colored note idea. Grejppi's suggestion looks fairly similar and is backed by BaraMGB.

It seems to me that this idea has the most support, although I may be a bit biased since I really like it ;)

[vlad0337187]

Maybe let's search a little more. Yes, colored idea is good, @grejppi 's suggestion looks like finished, previous colored keys idea not looks like so.

[Umcaruje]

I like the mockup @grejppi posted too (this is from budislav's theme), as the color is not as bright as the one in @RebeccaDeField's mockup. Something like this could work.

[vlad0337187]

Maybe something like this? PianoRoll_5.svg.zip

If you liked my grid: https://github.com/LMMS/lmms/issues/3019#issuecomment-245580836, it'll be compatible with it with colors: piano roll keylist.zip

P.S. I would like Budislav's interface to be implemented with current in parallel. They are both great.

[RebeccaDeField]

I can see that things are leaning more in the direction of a colored key, and I'm seeing a lot of great ideas here. I will mock some new options up based on the conversation. I would like to ask @Budislav's permission before basing my design off of your work with the piano roll as people have requested.

@grejppi 's suggestion looks like finished, previous colored keys idea not looks like so.

You are correct. @grejppi suggested a finished design whereas my quick mockups for the keys still needed some finesse.

P.S. I would like Budislav's interface to be implemented with current in parallel.

@vlad1777d I created what would more technically be called a re-skin. The layout is the same, but look is different. Budislav created a complete redesign. He rearranged the program to be clearer while also introducing a wonderful new look. Basically, I am working within the box of what we already have in place and can implement fairly quickly and he worked outside of the box, creating a great design for what we want to move towards to improve both the layout, functionality and look. Implementing these themes is a very different process.

My hope is that my theme can bridge the gap in LMMS between where we are now (current layout) and where we want to be in the future (his layout or something akin to it.) I hope that this theme will give what we already have in place a refresh so that we can have more time to put some focus into improving the stability and code side of things. I also hope that many of the things we are doing for this theme helps to being us towards the Single Window theme when we are ready to get there. Not to say we shouldn't work towards the single window concept, but just trying to clarify the differences.

[tresf]

@tresf's Would love to hear your input on this as well as you opened the issue. Would any of the options above solve difficulties you brought up here?

A picture's worth 1,000 words... Here's a zoom-out of the mockups. There's only one that's suitable IMO, which is conveniently in alignment with consensus. 👍

[RebeccaDeField]

@tresf As always, thank you for the invaluable feedback. I will test the next mockup from this perspective before posting.

[budislav]

@RebeccaDeField sure, go ahead :)

[RebeccaDeField]

Idea based on all of the new feedback:

@tresf @musikBear @vlad1777d @Spekular @Umcaruje

[BaraMGB]

Looks great!

[vlad0337187]

@RebeccaDeField , not bad, I like it. Green colors from theme, grey colors from it too. It looks good.

But maybe to add a little of volume to black unpressed keys? (I mean a light gradient at the end of key. You have such, but they are only lines.) Because it looks like a little flat without them. But this is not principal (not necessarily).

And, maybe to align black keys, like they are on piano? I don't understand why you're trying to make keys with different distances between their centers.

[Spekular]

Looks good to me!

[BaraMGB]

@vlad1777d I guess this is a mokeup. The distances will be made in code.

[RebeccaDeField]

@vlad1777d ^^^

[vlad0337187]

@RebeccaDeField , I thought that it's your style. It's cutting eyes to perfectionist in me =)

@BaraMGB , yeah, right.

[RebeccaDeField]

@vlad1777d Yeah, I'm a bit of a perfectionist too, but I am also very busy so I have little time to spare. I have to make compromises when I comes to things like quick mockups (especially when I'm mocking up 4+ ideas at once). I spent my time on the pixel-perfect key design, the arrangement will be perfect when it's in the program as well. Because it's important to you, I updated the keys to be perfectly centered in the mockup. I will make sure to clarify when uploading mockups vs final work :sweat_smile:

[vlad0337187]

@RebeccaDeField , well, I'll not carp then )

[mikobuntu]

Here's how ZynAddSubFX-3 (beta/demo) is using colour for their key press. Seems we are not the only ones opting for the green hue :)

[vlad0337187]

@mikobuntu , yes, and Linux Sampler's Fantasia GUI use green color: https://github.com/LMMS/lmms/issues/3018#issuecomment-245907018 =)

[musikBear]

@mikobuntu Oooo that is a 'shade' of green, isent it.. ? I believe its about the same 'shade' that normally kills jedies or whamms spacecraft out of the stir :D. a bit over-greened for my taste.. Though, Could be an environment-friendly release.. "zasfx now GREEN" :rabbit:

No jokes aside, i really cant understand why they don use the same green they have in most of the design? That would look smashing, even stylish. Neongreen looks ..neongreen always, and that is not necessary a good thing, unless the purpose is to mark an accident site