Draw flat, borderless, semi-transparent and sharp-cornered notes - #2827
Conversation
| float PianoRoll::noteOpacity() const | ||
| { return m_noteOpacity; } | ||
|
|
||
| void PianoRoll::setNoteOpacity( const float & f ) |
There was a problem hiding this comment.
Is the reference (&) needed?
There was a problem hiding this comment.
Actually, it isn't. Good catch.
There was a problem hiding this comment.
There was a problem hiding this comment.
Could we maybe use note color to denote velocity?
... ? We already use the color to denote velocity, the lightness of the color gets changed. The thing is, having two identical notes on top of each other would probably sound just as loud as a note with a double velocity, and if you need to know the exact velocity, you have the velocity bars on the bottom.
|
Why do some notes fade into dark from side to side? |
Those are panned notes. |
…rease the contrast of the grid
|
hm, it's kind of hard to see where that one panned note at the right begins... |
True. I converted the gradient to a horizontal one (thanks for the idea @grejppi) so now you can clearly see the start/end of a note: to @musikBear's concerns from #2777, I can make the grid even lighter, if you still find it hardly distinguishable. |
Umcaruje
changed the title
|
per @liushuyu I increased the opacity to 65% for better visibility: |
I do find it hard to see the grid, and i know that it will be a strain on my poor eye-sight, but as long as the grid are CSS controlled, i can choose to make the gridlines all white. |
|
Ok, I'll self-merge this pr in 8 or so hours unless there are objections. |
|
How would it look like if hue depended on note speed? Short notes, red; long notes, green (red + green = constant). |
|
I tend to prefer the ones with solid borders. Notes are like the text on a document, they must standout with the utmost significance. The 65% I feel is a bad idea unless they have solid borders. We need to make sure not to let a cosmetic decision cloud a functional one. |
|
I also do not like where this is heading but this is just a personal opinion, I don't like how the Semi transparent notes look and I also feel borders are very important. |
|
Ok then, should I reintroduce borders, and just have 50% transparency on the inside of the notes?
That's a cool idea, but I don't see its point and also that would mean that the color of the notes becomes hardcoded |
|
Here's the notes with the border and just the filling transparent. This allows us to see overlapping notes and not sacrifice clearness. |
|
Honestly I like the borderless ones more. The contrast between bright edges and dark fill on the quieter notes makes them stand out more than the louder ones, which is somewhat counter-intuitive. |
|
I have tested this branch today with borderless notes and liked it. All notes are clear to see. Those with lowest velocity, too. |
Then reverse it, but I don't necessarily agree that it makes them stand out less. That green is a pretty obnoxious color IMO. Here's some other mockups...
|
|
Also, I'd like to add that this can be merged any time. I'm not trying to hold up any progress, just stating my opinion since I was @mentioned. |
|
I seriously believe we should find a colorblind solution for this, that may be easy for you to see but for people like me, colors are a bit messy and those notes confuse me a lot. Edit: Sorry for not being @mentioned. |
|
Let me explain my situation:
Notes linked by the white line look same to me. You can also tell that: But since note 'b' and 'c' look the same color to me in the two sections pointed I could believe that 'b' ends in '3', I have to look at the pattern of the notes to conclude which note is which and that won't be always as easy. |
|
And what if the note on mouse hover changes the color or hue or something like that? |
When you click on a note, it changes its color. If we implemented hover change for notes it'll become insonsistent with the rest of LMMS, because the BB steps and TCOs don't react on hover. |
|
@IvanMaldonado How often do you lay out your notes like that? |
|
@grejppi Not often at all, but I don't believe I'm the only colorblind out there who uses lmms, It is fine for me I just think it is important to take these things in count. About the borders, I would like to see how the notes look in this positon:
|
|
Borderless: Borderfull: |
|
Alright, fair enough... since most people here like the borderless one better, can I ask for the borders to be enabled/disabled by css? |
|
Implemented a qproperty that makes the border width themeable. Please note it only works if you input values such as 1 or 0. If you make the width wider all hell breaks loose and notes have a 1px offset. I'm gonna sleep now. |
|
@Umcaruje Thank you, good night :) |
|
Just reading over this. Looks like there are a lot of great solutions here. 👍 My 2 cents: from reading over the comments, it looks to me that we have two options. Either "borderless" with the opacity at a level that works for LMMS users or "borderfull" with slightly less bright borders. Because the Song Editor is a very important part of the program I personally feel like having the color match the primary LMMS color is important, but if it had to be changed I would like the Instrument Pattern to match new color in the Song Editor. |
|
Ok, so here's what I implemented. We have a boolean qproperty Here is the borderless version of notes, with different velocities, different pan and overlapping + stacked notes: Here are the same notes with borders, styled like the classic theme, but I did the changes in the default theme because I'm simply lazy to switch to classic (The grid and background are almost the same, the only different thing is the note hue, but you get how the notes look):
|
|
@tresf wrote
That is simply the most important that has been written! And now i did reference tresf 3 images #2827 (comment) |
I believe @tresf has changed the hue in gimp or similar, so the total color of the picture was changed, as those were mockups. Nothing is linked to anything in the CSS. All colors are independent, and you can set them however you like. If bright orange on a rainbow gradient is your thing and you like it, you can set that up. |
| qproperty-noteBorderRadiusX: 5; | ||
| qproperty-noteBorderRadiusY: 2; | ||
| qproperty-noteOpacity: 128; | ||
| qproperty-borderlessNotes: false; /* boolean property, set true to have borderless notes */ |
There was a problem hiding this comment.
borderlessNotes is confusing as it causes a double negative. How about something like useNoteBorders with inverse logic?
There was a problem hiding this comment.
Maybe even noteBorders in order to be consistent with gradient
|
Travis passed, as the borders are now themeable, I'm merging. A lot of the users liked the borderless notes, myself included, so I'm making them the default. If you want to change the color of notes, please do so in another PR, as that is out of scope of this PR. |
Very good! 🍊 Thanks! |
…S#2827) * Draw flat, borderless, semi-transparent and sharp-cornered notes; Increase the contrast of the grid * Convert the note gradient to a horizontal one * Increase opacity for better visibility * Reinstate borders, make the fill semi-transparent * Some cosmetic touch-ups * Make border width themeable * Set a boolean for borderless properties * Rename borderlessNotes to noteBorders
10 participants
Closes #2777.
Flat notes with the end-point were the most popular choice, and I added transparency (adjustable by a qproperty) so the user can distinguish overlapping notes.
I also changed the selected notes color to the same color TCO's have when selected, because the current selected notes color had the same hue and saturation as the normal note color, and as such it did not affect the notes at all.
Here's a not selected and a selected note:
I increased the grid color lightness, as I was having a hard time distinguishing the grid.
As always, review and comments welcome.