Piano Roll and Automation editor grid redesign (w/ @BaraMGB) #3062

Umcaruje · 2016-10-03T18:43:23Z

Thank you very much @BaraMGB for collaborating on this Pull Request with me and helping me out with my problems.

The grid is ligher, the background alternates shades. I also did a general CSS cleanup, fixed the indentation and stuff.

Feedback and testing welcome.

BaraMGB · 2016-10-03T19:06:13Z

That looks really great, now.

simonvanderveldt · 2016-10-04T20:03:49Z

Could it also solve this one (or include a specific fix for it)? #2832

Umcaruje · 2016-10-04T20:16:10Z

Could it also solve this one (or include a specific fix for it)? #2832

To allow seperate colors for different lines? seems like a overkill to me.

Umcaruje · 2016-10-04T20:23:06Z

Conflicts resolved, rebased.

Umcaruje · 2016-10-05T19:02:13Z

@musikBear your feedback would be valuable on this.

BaraMGB · 2016-10-06T08:38:41Z

Could it be worth to shade horizontal lines which represent a black key? I noticed that in other programs.

musikBear · 2016-10-06T11:45:55Z

@Umcaruje Very good! Also in respect to the vertical grid-lines. I think this will be pleasant to work with
🍾 👍

BaraMGB · 2016-10-06T12:38:40Z

src/gui/editors/PianoRoll.cpp

+ {
+ if ( (barCount + leftBars) % 2 != 0 )
+ {
+ p.drawRect( x - m_currentPosition, PR_TOP_MARGIN, m_ppt,


Okay, I've got a green line on top of the shading rect:

What helps is:

p.fillRect( x - m_currentPosition, PR_TOP_MARGIN, m_ppt, height() - ( PR_BOTTOM_MARGIN + PR_TOP_MARGIN ), backgroundShade() );

by removing the : p.setBrush( backgroundShade() ); of course.

Umcaruje · 2016-10-06T13:17:43Z

Good catch @BaraMGB, will fix asap.

Glad you like it @musikBear. Can we close out the issue where its asked
that the tick lines have a different color? Or do you think this still does
not help in that sense

On 6 Oct 2016 14:38, "BaraMGB" [email protected] wrote:

@BaraMGB requested changes on this pull request.

In src/gui/editors/PianoRoll.cpp
#3062 (review):

@@ -2863,6 +2870,22 @@ void PianoRoll::paintEvent(QPaintEvent * pe )

bool show32nds = ( m_zoomingModel.value() > 3 );
// alternating shades for better contrast

// count the bars which disappear on left by scrolling

int barCount = m_currentPosition / MidiTime::ticksPerTact();

int leftBars = m_currentPosition / m_ppt;
+

p.setBrush( backgroundShade() );
+

for ( int x = WHITE_KEY_WIDTH; x < width() + m_currentPosition; x += m_ppt, ++barCount )

{
if ( (barCount + leftBars)  % 2 != 0 )
{
        p.drawRect( x - m_currentPosition, PR_TOP_MARGIN, m_ppt,
Okay, I've got a green line on top of the shading rect:
[image: 2016-10-06-143342_1920x1080_scrot]
https://cloud.githubusercontent.com/assets/6502580/19152379/00306bf0-8bd2-11e6-852c-cfeaa2835b45.png

What helps is:

p.fillRect( x - m_currentPosition, PR_TOP_MARGIN, m_ppt,
height() - ( PR_BOTTOM_MARGIN + PR_TOP_MARGIN ), backgroundShade() );

by removing the : p.setBrush( backgroundShade() ); of course.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#3062 (review), or mute
the thread
https:/notifications/unsubscribe-auth/AF_bPYXWjzNtR4tni3EAROMiV6-gzjgPks5qxOvhgaJpZM4KM5wg
.

musikBear · 2016-10-07T12:55:18Z

@Umcaruje afaik, you have implemented css option for grid, and my poor vision can not be a hallmark for the design. I can fiddle with the css, and the current design you have here is clearly much better. The vertical bar-dividers are still a bit difficult to see, but yes. If noone else feel the same about bar-dividers, then this is a fine design 👍
[ I am not sure i ever really got to explain the triplet-line idea for bar-dividers, so i will just try with one more drawing, because there was never different colors in that idea, just two additional lines on each side of the current bar-divider-line, so in total 3 lines

I have tried to explain the tripple-line bar-divider WITH color, but that just to explain the idea

Umcaruje · 2016-10-07T19:40:25Z

@BaraMGB fixed it.

Umcaruje · 2016-10-07T19:44:25Z

@musikBear here's how the grid looks with your proposal. Seems like an overkill to me.

simonvanderveldt · 2016-10-07T19:53:44Z

Hmm, the 3 lines might be a bit excessive.

But on the other hand, especially in the automation editor the distinction between the bar and and tick lines is pretty minimal (like in your screenshot https://cloud.githubusercontent.com/assets/6282045/19049224/d129f1c0-89a9-11e6-82cb-1d2cb7766374.png).
It would be nice of those lines were a bit easier to distinguish from eachother.

BaraMGB · 2016-10-08T13:56:56Z

If the discussion is over, this one can be merged. @musikBear @simonvanderveldt ?

simonvanderveldt · 2016-10-08T23:06:07Z

@BaraMGB I just tried this branch locally and for me the extra shading of every 2nd bar makes LMMS feel a bit "busy" (hope you know what I mean). I definitely prefer it without the shading.

I do think a better visible grid is a necessity though. This goes for both the normal horizontal (notes) and vertical (ticks) lines and especially for the "major" ticks.
For me the bar start/end is clearly visible, but the major ticks like 1.2, 1.3, etc aren't.

Best example of what works really well for me/I really like is this:
https://www.image-line.com/support/FLHelp/html/img_shot/pianoroll_draghandle.png

@Umcaruje Any clue if this will clash with darker horizontal lines for the black keys vs lighter horizontal lines for the white keys?

Umcaruje · 2016-10-11T14:32:02Z

I'm going to merge this in a couple of hours if there are no objections.

simonvanderveldt · 2016-10-11T14:44:20Z

I'm going to merge this in a couple of hours if there are no objections.

I think we should address the root cause that currently makes it difficult to distinguish bars (and ticks) from each other, which IMHO is that the grid's visibility isn't good enough. This is pretty much as posted in #3019

I'm not a fan of adding extra stuff (in this case visual overhead) to fix issues whilst the root issue isn't solved. I do see that #2308 specifically requests highlighting for odd bars, but no one asked why that request was made.

Umcaruje · 2016-10-11T17:44:54Z

Ok then, I'll work on this more 👍

musikBear · 2016-10-13T15:45:09Z

@Umcaruje Sorry i have been 'Off' for a week, so i have not been following your work. I have to say that i kind of like the image with the triplet line, but i also understand that you feel it does not suit your overall design. Design and 'taste' is darn difficult :) Very good work, though 👍

Umcaruje · 2017-02-11T22:38:50Z

Update: Automation editor has the same grid now, and shading is more visible.

Waiting for color guidelines from @RebeccaDeField and this can be tested and merged.

musikBear · 2017-02-12T13:12:32Z

Update: Automation editor has the same grid now, and shading is more visible.

@Umcaruje it is visible now, but inside the blue area in automation, i cant see it ( -It is ofcause also because of the graduated alpha, which i know is easy to disable :)
Is the intensity of the bar shading also modifiable in css?
The me and other bats, can just do that, and i will not comment the faint default grid again :)

Umcaruje · 2017-02-12T14:01:12Z

Is the intensity of the bar shading also modifiable in css?

Yes, absolutely everything is modifiable in css. You can easily change the opacity of the shading part.

tresf · 2017-02-12T14:42:18Z

@musikBear has a good point. This may be worthy running through a colorblind test. Here's some numbers...

an all-boys school in the Home Counties of England with 1000 pupils would have approximately 100 colour deficient students. 12-13 would be deuteranopes, 12-13 would be protanopes, 12-13 would have a form of protanomaly and 62 would have a form of deuteranomaly. About half of those with an anomalous condition would have a moderate to severe form of deficiency.

tresf · 2017-02-12T14:43:33Z

That said, I love it. :)

Umcaruje · 2017-02-12T23:55:43Z

After some help from @RebeccaDeField this is the current look:

This PR is finally ready for merging and review.

Umcaruje · 2017-02-13T21:30:11Z

@tresf @musikBear @vlad1777d If this is looking good, I'll merge.

musikBear · 2017-02-14T16:03:17Z

@Umcaruje When you told me that i can work with it in CSS, im absolutely satisfied! Great job! 🎆

tresf · 2017-02-14T18:37:40Z

@Umcaruje I have not reviewed the code, but the UI without a doubt fixes #3019. 👍

vlad0337187 · 2017-03-03T18:45:36Z

@Umcaruje , It looks great, especially violent automation line =)

vlad0337187 · 2018-03-09T16:00:01Z

@Umcaruje , sorry that I write not in appropriate place, but I didn't found any IRC channels or something like this to ask question,
can I change colors of automation editor's grid without rebuilding LMMS ?

(also I'd like to try adjusting colors of automation graph)

Seems, it's not so clear as Piano Roll's grid.

zonkmachine · 2018-03-09T16:26:43Z

I didn't found any IRC channels or something like this to ask question,

Here: https://discord.gg/3sc5su7
Especially the channel named #support

musikBear · 2018-03-10T15:59:07Z

Here:

Well yes, but any explanation done in discord, is lost after the discord session. So the time used in discord to explain a feature, benefits exactly one person.
Written down, it could benefit n persons. 🙊

Spekular · 2018-03-10T17:20:01Z

@musikBear nope, Discord has persistent chat history. Besides, mentioning "consensus on Discord is ___" is writing it down for the benefit of those on github.

Umcaruje · 2018-03-11T09:49:19Z

@Umcaruje , sorry that I write not in appropriate place, but I didn't found any IRC channels or something like this to ask question,
can I change colors of automation editor's grid without rebuilding LMMS ?

@vlad1777d yeah, you can. Just edit the qproperty-lineColor, qproperty-beatLineColor, qproperty-barLineColor css rules under AutomationEditor.

If you come up with a better colored grid, don't be hesitant to share, I'm always open for improvement on the gui, and your mockups made this PR happen :)

musikBear · 2018-03-11T17:07:22Z

Discord has persistent chat history

Searchable? That would render my thought to void, but is it? ..anywitch oftopic so ..

Spekular · 2018-03-11T17:20:30Z

@musikBear searchable, and with great filtering: https://support.discordapp.com/hc/en-us/articles/115000468588-Using-Search

…

On Sun, Mar 11, 2018, 18:07 musikBear ***@***.***> wrote: Discord has persistent chat history Searchable? That would render my thought to void, but is it? ..anywitch oftopic so .. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3062 (comment)>, or mute the thread <https:/notifications/unsubscribe-auth/AIgVmoUumJMsjCrLhp9v1I5U7RhfihxCks5tdVnNgaJpZM4KM5wg> .

* Make dem grid ndasd * grid BG * fix bug in scroll behavior * debugging scrolling * Add CSS property, port to automation editor * Fix a fail * Spaces to tabs * Use fillRect rather than drawRect * Implement @vlad1777d's idea * Seperate loops and stuff * Finish up Piano Roll Grid * Cleanup * Redesign the grid for the Automation Editor * Update colors * Formatting changes * formatting changes II

Umcaruje force-pushed the lightergrid branch 2 times, most recently from d4a4ea8 to ac4c44c Compare October 3, 2016 18:51

Umcaruje force-pushed the lightergrid branch from 7797e28 to 04df650 Compare October 4, 2016 20:22

BaraMGB requested changes Oct 6, 2016

View reviewed changes

BaraMGB approved these changes Oct 8, 2016

View reviewed changes

Umcaruje added the in progress label Jan 5, 2017

Umcaruje force-pushed the lightergrid branch from 072f29c to 560b2fa Compare January 5, 2017 21:24

Umcaruje and others added 5 commits January 22, 2017 21:40

Make dem grid ndasd

ab68bc4

grid BG

04120af

fix bug in scroll behavior

0187be6

debugging scrolling

93e7546

Add CSS property, port to automation editor

4dc95f7

Redesign the grid for the Automation Editor

c4bb461

Update colors

3345061

Umcaruje removed the in progress label Feb 12, 2017

Formatting changes

152fe72

Umcaruje mentioned this pull request Feb 15, 2017

Triplets in Automation Editor #3358

Closed

formatting changes II

d22995f

Umcaruje merged commit de2e164 into LMMS:master Feb 22, 2017

This was referenced Mar 11, 2017

Piano roll grid enchancement #1842

Open

Grid disappeared in Piano Roll #3423

Closed

Umcaruje mentioned this pull request Aug 8, 2017

enhance the view of piano-roll & automation-editor #2308

Closed

RebeccaDeField mentioned this pull request Oct 2, 2018

High-contrast option for accessibility #4473

Open

Piano Roll and Automation editor grid redesign (w/ @BaraMGB) #3062

Piano Roll and Automation editor grid redesign (w/ @BaraMGB) #3062

Conversation

Umcaruje commented Oct 3, 2016

BaraMGB commented Oct 3, 2016

simonvanderveldt commented Oct 4, 2016

Umcaruje commented Oct 4, 2016

Umcaruje commented Oct 4, 2016

Umcaruje commented Oct 5, 2016 • edited Loading

BaraMGB commented Oct 6, 2016

musikBear commented Oct 6, 2016

BaraMGB Oct 6, 2016

Choose a reason for hiding this comment

Umcaruje commented Oct 6, 2016

@BaraMGB requested changes on this pull request.

musikBear commented Oct 7, 2016

Umcaruje commented Oct 7, 2016

Umcaruje commented Oct 7, 2016 • edited Loading

simonvanderveldt commented Oct 7, 2016

BaraMGB commented Oct 8, 2016

simonvanderveldt commented Oct 8, 2016

Umcaruje commented Oct 11, 2016

simonvanderveldt commented Oct 11, 2016 • edited Loading

Umcaruje commented Oct 11, 2016

musikBear commented Oct 13, 2016

Umcaruje commented Feb 11, 2017

musikBear commented Feb 12, 2017 • edited Loading

Umcaruje commented Feb 12, 2017

tresf commented Feb 12, 2017

tresf commented Feb 12, 2017

Umcaruje commented Feb 12, 2017

Umcaruje commented Feb 13, 2017

musikBear commented Feb 14, 2017

tresf commented Feb 14, 2017

vlad0337187 commented Mar 3, 2017

vlad0337187 commented Mar 9, 2018 • edited Loading

zonkmachine commented Mar 9, 2018

musikBear commented Mar 10, 2018

Spekular commented Mar 10, 2018

Umcaruje commented Mar 11, 2018

musikBear commented Mar 11, 2018

Spekular commented Mar 11, 2018 via email

Umcaruje commented Oct 5, 2016 •

edited

Loading

Umcaruje commented Oct 7, 2016 •

edited

Loading

simonvanderveldt commented Oct 11, 2016 •

edited

Loading

musikBear commented Feb 12, 2017 •

edited

Loading

vlad0337187 commented Mar 9, 2018 •

edited

Loading