Draw flat, borderless, semi-transparent and sharp-cornered notes #2827

Umcaruje · 2016-06-06T22:17:20Z

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.

grejppi · 2016-06-06T22:26:25Z

src/gui/editors/PianoRoll.cpp

+float PianoRoll::noteOpacity() const
+{ return m_noteOpacity; }
+
+void PianoRoll::setNoteOpacity( const float & f )


Is the reference (&) needed?

Actually, it isn't. Good catch.

I feel like this makes it harder to tell how high a notes velocity is. For example, two identical notes on top of each other vs one note with twice the velocity. Could we maybe use note color to denote velocity?

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.

IvanMaldonado · 2016-06-06T22:43:01Z

Why do some notes fade into dark from side to side?

Umcaruje · 2016-06-06T22:49:35Z

Why do some notes fade into dark from side to side?

Those are panned notes.

…rease the contrast of the grid

Moth-Tolias · 2016-06-07T06:20:27Z

hm, it's kind of hard to see where that one panned note at the right begins...
i'm probably just stating what's gone before, but i really think having an outline is a valuable thing worth keeping.

Umcaruje · 2016-06-07T14:25:37Z

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.

cc @RebeccaDeField

Umcaruje · 2016-06-07T14:44:44Z

per @liushuyu I increased the opacity to 65% for better visibility:

musikBear · 2016-06-08T10:51:44Z

to @musikBear's concerns from #2777, I can make the grid even lighter, if you still find it hardly distinguishable.

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.
So if CSS grid-drawing-controll is preserved in 1.2 with Rebeccas theme ( ?? I cant see anything regarding Piano-roll in #2770 ?) the whole default design should not change because of one half-blind user.

Umcaruje · 2016-06-08T11:01:41Z

Ok, I'll self-merge this pr in 8 or so hours unless there are objections.

CC @tresf @RebeccaDeField @unfa

jasp00 · 2016-06-08T17:42:21Z

How would it look like if hue depended on note speed? Short notes, red; long notes, green (red + green = constant).

tresf · 2016-06-08T17:50:30Z

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.

IvanMaldonado · 2016-06-08T17:54:24Z

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.

Umcaruje · 2016-06-08T18:59:15Z

Ok then, should I reintroduce borders, and just have 50% transparency on the inside of the notes?

How would it look like if hue depended on note speed? Short notes, red; long notes, green (red + green = constant).

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

Umcaruje · 2016-06-08T19:07:01Z

Here's the notes with the border and just the filling transparent. This allows us to see overlapping notes and not sacrifice clearness.

grejppi · 2016-06-08T19:18:18Z

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.

BaraMGB · 2016-06-08T19:25:07Z

I have tested this branch today with borderless notes and liked it. All notes are clear to see. Those with lowest velocity, too.

Umcaruje · 2016-06-08T19:43:11Z

I too agree with @grejppi and @BaraMGB, I prefer the flat notes and find them giving me less eye-strain than the ones with the borders

tresf · 2016-06-08T20:06:55Z

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.

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...

tresf · 2016-06-08T20:26:51Z

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.

IvanMaldonado · 2016-06-08T21:40:49Z

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.

IvanMaldonado · 2016-06-08T22:28:21Z

Let me explain my situation:

Notes linked by the white line look same to me.

You can also tell that:
note 'a' ends in point '1'
note 'b' ends in point '2'
note 'c' ends in point '3'

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.

BaraMGB · 2016-06-08T22:39:46Z

And what if the note on mouse hover changes the color or hue or something like that?

Umcaruje · 2016-06-08T22:41:40Z

And what if the note on mouse hover change 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.

grejppi · 2016-06-08T22:46:12Z

@IvanMaldonado How often do you lay out your notes like that?

IvanMaldonado · 2016-06-08T23:00:42Z

@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:

Umcaruje · 2016-06-08T23:05:50Z

Borderless:
(Note: transparency is 50%, because I'm lazy)

Borderfull:

IvanMaldonado · 2016-06-08T23:13:57Z

Alright, fair enough... since most people here like the borderless one better, can I ask for the borders to be enabled/disabled by css?

Umcaruje · 2016-06-08T23:40:57Z

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.

IvanMaldonado · 2016-06-09T00:17:27Z

@Umcaruje Thank you, good night :)

RebeccaDeField · 2016-06-09T01:30:31Z

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.

Umcaruje · 2016-06-09T11:41:50Z

Ok, so here's what I implemented. We have a boolean qproperty borderlessNotes that enables the user to choose if they want to have borderless notes. I think that the default look should be borderless notes with 65% transparency (alpha = 165). The classic theme has notes with borders and 50% transparency.

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):

musikBear · 2016-06-09T12:04:28Z

@tresf wrote

We need to make sure not to let a cosmetic decision cloud a functional one.

That is simply the most important that has been written!
If both borderless and borderfull options now are available through CSS, then I believe @Umcaruje has fixed this issue as good as possible 👍
One thing i saw that i need to ask: Is gridcoler depending of chosen note-color? In the 3 suggested schemes here #2827 (comment) , The gridcolor are the same as the notecolor. Is that mandatory? Are the CSS options grid-color and note-color the same? That to me is a functional mistake.

And now i did reference tresf 3 images #2827 (comment)
Try this experiment:
Size the picture so only one can be in view.
Then take the 3 pictures into view in turns, and just gaze at each one for at least 2 mins.
How does that 'feel' in the eyes?
Can you feel the eye-strain differences?
Imo the eyes does significantly best with the middle-one (sea-green), and worst with the blue. Gray (last) is almost as good as sea-green (middle).
Is that also what your eyes tell you?
Colors and contrast are unbelievably important.
Being sight-challenged (bat-blind really.. :p ) I also strongly feel the need to respect other peeps challenges. The color-blindness issue should definitely not be regarded as trivial. CSS is also needed there.
I have NO protest against a default factory theme that is stunning, but not useable for bats (me) or color-blinds IF a simple CSS edit can fix that. Just as Umcaruje now have done with borders. Brilliant work! This 🎉 also goes out to all that has implemented the extended CSS abilities 🍰

Umcaruje · 2016-06-09T12:27:02Z

The gridcolor are the same as the notecolor. Is that mandatory? Are the CSS options grid-color and note-color the same? That to me is a functional mistake.

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.

grejppi · 2016-06-09T20:31:16Z

data/themes/classic/style.css

-	qproperty-noteBorderRadiusX: 5;
-	qproperty-noteBorderRadiusY: 2;
+	qproperty-noteOpacity: 128;
+	qproperty-borderlessNotes: false; /* boolean property, set true to have borderless notes */


borderlessNotes is confusing as it causes a double negative. How about something like useNoteBorders with inverse logic?

Maybe even noteBorders in order to be consistent with gradient

Umcaruje · 2016-06-09T22:00:04Z

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.

musikBear · 2016-06-10T11:23:24Z

Nothing is linked to anything in the CSS. All colors are independent

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

grejppi reviewed Jun 6, 2016
View reviewed changes

Draw flat, borderless, semi-transparent and sharp-cornered notes; Inc…

4c22239

…rease the contrast of the grid

Umcaruje force-pushed the fixnotes branch from f16cb7f to 4c22239 Compare June 6, 2016 22:51

Umcaruje added 2 commits June 7, 2016 16:26

Convert the note gradient to a horizontal one

0f5a0f2

Increase opacity for better visibility

9f7b006

Umcaruje changed the title ~~Draw flat, borderless, semi-transparent and sharp-cornered notes; Increase the contrast of the grid~~ Draw flat, borderless, semi-transparent and sharp-cornered notes Jun 7, 2016

Umcaruje added 2 commits June 8, 2016 21:14

Reinstate borders, make the fill semi-transparent

1d98f7a

Some cosmetic touch-ups

b78c6c8

Make border width themeable

47c7668

Set a boolean for borderless properties

08fed6d

grejppi reviewed Jun 9, 2016
View reviewed changes

Rename borderlessNotes to noteBorders

34d8583

Umcaruje merged commit 1abbbc2 into LMMS:master Jun 9, 2016

Draw flat, borderless, semi-transparent and sharp-cornered notes #2827

Draw flat, borderless, semi-transparent and sharp-cornered notes #2827

Conversation

Umcaruje commented Jun 6, 2016 • edited Loading

grejppi Jun 6, 2016

Choose a reason for hiding this comment

Umcaruje Jun 6, 2016

Choose a reason for hiding this comment

Spekular Jun 7, 2016 via email

Choose a reason for hiding this comment

Umcaruje Jun 7, 2016 • edited Loading

Choose a reason for hiding this comment

IvanMaldonado commented Jun 6, 2016 • edited Loading

Umcaruje commented Jun 6, 2016

Moth-Tolias commented Jun 7, 2016 • edited Loading

Umcaruje commented Jun 7, 2016

Umcaruje commented Jun 7, 2016

musikBear commented Jun 8, 2016 • edited Loading

Umcaruje commented Jun 8, 2016

jasp00 commented Jun 8, 2016

tresf commented Jun 8, 2016

IvanMaldonado commented Jun 8, 2016

Umcaruje commented Jun 8, 2016

Umcaruje commented Jun 8, 2016 • edited Loading

grejppi commented Jun 8, 2016

BaraMGB commented Jun 8, 2016

Umcaruje commented Jun 8, 2016

tresf commented Jun 8, 2016

tresf commented Jun 8, 2016

IvanMaldonado commented Jun 8, 2016 • edited Loading

IvanMaldonado commented Jun 8, 2016

BaraMGB commented Jun 8, 2016 • edited Loading

Umcaruje commented Jun 8, 2016

grejppi commented Jun 8, 2016

IvanMaldonado commented Jun 8, 2016

Umcaruje commented Jun 8, 2016

IvanMaldonado commented Jun 8, 2016

Umcaruje commented Jun 8, 2016

IvanMaldonado commented Jun 9, 2016

RebeccaDeField commented Jun 9, 2016 • edited Loading

Umcaruje commented Jun 9, 2016

musikBear commented Jun 9, 2016

Umcaruje commented Jun 9, 2016

grejppi Jun 9, 2016

Choose a reason for hiding this comment

grejppi Jun 9, 2016

Choose a reason for hiding this comment

Umcaruje commented Jun 9, 2016

musikBear commented Jun 10, 2016

Umcaruje commented Jun 6, 2016 •

edited

Loading

Umcaruje Jun 7, 2016 •

edited

Loading

IvanMaldonado commented Jun 6, 2016 •

edited

Loading

Moth-Tolias commented Jun 7, 2016 •

edited

Loading

musikBear commented Jun 8, 2016 •

edited

Loading

Umcaruje commented Jun 8, 2016 •

edited

Loading

IvanMaldonado commented Jun 8, 2016 •

edited

Loading

BaraMGB commented Jun 8, 2016 •

edited

Loading

RebeccaDeField commented Jun 9, 2016 •

edited

Loading