Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Umcaruje merged 8 commits into from
Jun 9, 2016
+72 −57
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4c22239
Draw flat, borderless, semi-transparent and sharp-cornered notes; Inc…
Umcaruje May 30, 2016
0f5a0f2
Convert the note gradient to a horizontal one
Umcaruje Jun 7, 2016
9f7b006
Increase opacity for better visibility
Umcaruje Jun 7, 2016
1d98f7a
Reinstate borders, make the fill semi-transparent
Umcaruje Jun 8, 2016
b78c6c8
Some cosmetic touch-ups
Umcaruje Jun 8, 2016
47c7668
Make border width themeable
Umcaruje Jun 8, 2016
08fed6d
Set a boolean for borderless properties
Umcaruje Jun 9, 2016
34d8583
Rename borderlessNotes to noteBorders
Umcaruje Jun 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions data/themes/classic/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ PianoRoll {
qproperty-gridColor: rgb( 128, 128, 128 );
qproperty-noteModeColor: rgb( 255, 255, 255 );
qproperty-noteColor: rgb( 119, 199, 216 );
qproperty-noteBorderRadiusX: 5;
qproperty-noteBorderRadiusY: 2;
qproperty-noteOpacity: 128;
qproperty-borderlessNotes: false; /* boolean property, set true to have borderless notes */
Copy link
Contributor

@grejppi grejppi Jun 9, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@grejppi grejppi Jun 9, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe even noteBorders in order to be consistent with gradient

qproperty-selectedNoteColor: rgb( 0, 125, 255 );
qproperty-barColor: #4afd85;
qproperty-markedSemitoneColor: rgba( 40, 40, 40, 200 );
Expand Down Expand Up @@ -555,7 +555,7 @@ TrackContentObjectView {
qproperty-selectedColor: rgb( 0, 125, 255 );
qproperty-textColor: rgb( 255, 255, 255 );
qproperty-textShadowColor: rgb( 0, 0, 0 );
qproperty-gradient: true;
qproperty-gradient: true; /* boolean property, set true to have a gradient */
}

/* instrument pattern */
Expand Down
12 changes: 6 additions & 6 deletions data/themes/default/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ AutomationEditor {
background-color: #040506;
color: #ffffff;
qproperty-vertexColor: #7f0a1d;
qproperty-gridColor: #171a1d;
qproperty-gridColor: #2d3339;
qproperty-crossColor: #FE143A;

qproperty-graphColor: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1,
Expand Down Expand Up @@ -109,12 +109,12 @@ QMenu::indicator:selected {

PianoRoll {
background-color: #040506;
qproperty-gridColor: #171a1d;
qproperty-gridColor: #2d3339;
qproperty-noteModeColor: #0bd556;
qproperty-noteColor: #0bd556;
qproperty-noteBorderRadiusX: 0;
qproperty-noteBorderRadiusY: 0;
qproperty-selectedNoteColor: #044d1f;
qproperty-noteOpacity: 165;
qproperty-borderlessNotes: true; /* boolean property, set true to have borderless notes */
Copy link
Contributor

@grejppi grejppi Jun 9, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Same as in the other theme)

qproperty-selectedNoteColor: #006b65;
qproperty-barColor: #078f3a;
qproperty-markedSemitoneColor: #06170E;
/* Text on the white piano keys */
Expand Down Expand Up @@ -544,7 +544,7 @@ TrackContentObjectView {
qproperty-selectedColor: #006B65;
qproperty-textColor: #fff;
qproperty-textShadowColor: rgb(0,0,0,200);
qproperty-gradient: false;
qproperty-gradient: false; /* boolean property, set true to have a gradient */
}

/* instrument pattern */
Expand Down
18 changes: 9 additions & 9 deletions include/PianoRoll.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,13 @@ class PianoRoll : public QWidget
Q_PROPERTY( QColor noteModeColor READ noteModeColor WRITE setNoteModeColor )
Q_PROPERTY( QColor noteColor READ noteColor WRITE setNoteColor )
Q_PROPERTY( QColor barColor READ barColor WRITE setBarColor )
Q_PROPERTY( float noteBorderRadiusX READ noteBorderRadiusX WRITE setNoteBorderRadiusX )
Q_PROPERTY( float noteBorderRadiusY READ noteBorderRadiusY WRITE setNoteBorderRadiusY )
Q_PROPERTY( QColor selectedNoteColor READ selectedNoteColor WRITE setSelectedNoteColor )
Q_PROPERTY( QColor textColor READ textColor WRITE setTextColor )
Q_PROPERTY( QColor textColorLight READ textColorLight WRITE setTextColorLight )
Q_PROPERTY( QColor textShadow READ textShadow WRITE setTextShadow )
Q_PROPERTY( QColor markedSemitoneColor READ markedSemitoneColor WRITE setMarkedSemitoneColor )
Q_PROPERTY( int noteOpacity READ noteOpacity WRITE setNoteOpacity )
Q_PROPERTY( bool borderlessNotes READ borderlessNotes WRITE setBorderlessNotes )
public:
enum EditModes
{
Expand Down Expand Up @@ -116,10 +116,6 @@ class PianoRoll : public QWidget
void setNoteColor( const QColor & c );
QColor barColor() const;
void setBarColor( const QColor & c );
float noteBorderRadiusX() const;
void setNoteBorderRadiusX( float b );
float noteBorderRadiusY() const;
void setNoteBorderRadiusY( float b );
QColor selectedNoteColor() const;
void setSelectedNoteColor( const QColor & c );
QColor textColor() const;
Expand All @@ -130,6 +126,10 @@ class PianoRoll : public QWidget
void setTextShadow( const QColor & c );
QColor markedSemitoneColor() const;
void setMarkedSemitoneColor( const QColor & c );
int noteOpacity() const;
void setNoteOpacity( const int i );
bool borderlessNotes() const;
void setBorderlessNotes( const bool b );


protected:
Expand All @@ -148,7 +148,7 @@ class PianoRoll : public QWidget
int getKey( int y ) const;
static void drawNoteRect( QPainter & p, int x, int y,
int width, const Note * n, const QColor & noteCol,
float radiusX, float radiusY, const QColor & selCol );
const QColor & selCol, const int noteOpc, const bool borderless );
void removeSelection();
void selectAll();
NoteVector getSelectedNotes();
Expand Down Expand Up @@ -372,13 +372,13 @@ protected slots:
QColor m_noteModeColor;
QColor m_noteColor;
QColor m_barColor;
float m_noteBorderRadiusX;
float m_noteBorderRadiusY;
QColor m_selectedNoteColor;
QColor m_textColor;
QColor m_textColorLight;
QColor m_textShadow;
QColor m_markedSemitoneColor;
int m_noteOpacity;
bool m_borderlessNotes;

signals:
void positionChanged( const MidiTime & );
Expand Down
93 changes: 54 additions & 39 deletions src/gui/editors/PianoRoll.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,13 @@ PianoRoll::PianoRoll() :
m_noteModeColor( 0, 0, 0 ),
m_noteColor( 0, 0, 0 ),
m_barColor( 0, 0, 0 ),
m_noteBorderRadiusX( 0 ),
m_noteBorderRadiusY( 0 ),
m_selectedNoteColor( 0, 0, 0 ),
m_textColor( 0, 0, 0 ),
m_textColorLight( 0, 0, 0 ),
m_textShadow( 0, 0, 0 ),
m_markedSemitoneColor( 0, 0, 0 )
m_markedSemitoneColor( 0, 0, 0 ),
m_noteOpacity( 255 ),
m_borderlessNotes( true )
{
// gui names of edit modes
m_nemStr.push_back( tr( "Note Velocity" ) );
Expand Down Expand Up @@ -746,18 +746,6 @@ QColor PianoRoll::barColor() const
void PianoRoll::setBarColor( const QColor & c )
{ m_barColor = c; }

float PianoRoll::noteBorderRadiusX() const
{ return m_noteBorderRadiusX; }

void PianoRoll::setNoteBorderRadiusX( float b )
{ m_noteBorderRadiusX = b; }

float PianoRoll::noteBorderRadiusY() const
{ return m_noteBorderRadiusY; }

void PianoRoll::setNoteBorderRadiusY( float b )
{ m_noteBorderRadiusY = b; }

QColor PianoRoll::selectedNoteColor() const
{ return m_selectedNoteColor; }

Expand Down Expand Up @@ -788,9 +776,25 @@ QColor PianoRoll::markedSemitoneColor() const
void PianoRoll::setMarkedSemitoneColor( const QColor & c )
{ m_markedSemitoneColor = c; }

void PianoRoll::drawNoteRect(QPainter & p, int x, int y,
int PianoRoll::noteOpacity() const
{ return m_noteOpacity; }

void PianoRoll::setNoteOpacity( const int i )
{ m_noteOpacity = i; }

bool PianoRoll::borderlessNotes() const
{ return m_borderlessNotes; }

void PianoRoll::setBorderlessNotes( const bool b )
{ m_borderlessNotes = b; }





void PianoRoll::drawNoteRect( QPainter & p, int x, int y,
int width, const Note * n, const QColor & noteCol,
float radiusX, float radiusY, const QColor & selCol )
const QColor & selCol, const int noteOpc, const bool borderless )
{
++x;
++y;
Expand All @@ -801,8 +805,8 @@ void PianoRoll::drawNoteRect(QPainter & p, int x, int y,
width = 2;
}

int volVal = qMin( 255, 25 + (int) ( ( (float)( n->getVolume() - MinVolume ) ) /
( (float)( MaxVolume - MinVolume ) ) * 230.0f) );
int volVal = qMin( 255, 100 + (int) ( ( (float)( n->getVolume() - MinVolume ) ) /
( (float)( MaxVolume - MinVolume ) ) * 155.0f) );
float rightPercent = qMin<float>( 1.0f,
( (float)( n->getPanning() - PanningLeft ) ) /
( (float)( PanningRight - PanningLeft ) ) * 2.0f );
Expand All @@ -812,37 +816,47 @@ void PianoRoll::drawNoteRect(QPainter & p, int x, int y,
( (float)( PanningRight - PanningLeft ) ) * 2.0f );

QColor col = QColor( noteCol );
QPen pen;

if( n->selected() )
{
col = QColor( selCol );
}

const int borderWidth = borderless ? 0 : 1;

const int noteHeight = KEY_LINE_HEIGHT - 1 - borderWidth;
int noteWidth = width + 1 - borderWidth;

// adjust note to make it a bit faded if it has a lower volume
// in stereo using gradients
QColor lcol = QColor::fromHsv( col.hue(), col.saturation(),
volVal * leftPercent );
volVal * leftPercent, noteOpc );
QColor rcol = QColor::fromHsv( col.hue(), col.saturation(),
volVal * rightPercent );
volVal * rightPercent, noteOpc );

QLinearGradient gradient( x, y, x+width, y+KEY_LINE_HEIGHT );
gradient.setColorAt( 0, lcol );
gradient.setColorAt( 1, rcol );
QLinearGradient gradient( x, y, x, y + noteHeight );
gradient.setColorAt( 0, rcol );
gradient.setColorAt( 1, lcol );
p.setBrush( gradient );

p.setPen( col );
p.setRenderHint(QPainter::Antialiasing);
p.drawRoundedRect( QRectF ( x + 0.5, y - 0.5, width, KEY_LINE_HEIGHT ), radiusX, radiusY );
if ( borderless )
{
p.setPen( Qt::NoPen );
}
else
{
p.setPen( col );
}

p.drawRect( x, y, noteWidth, noteHeight );

// that little tab thing on the end hinting at the user
// to resize the note
p.setPen( noteCol.lighter( 200 ) );
p.setBrush( noteCol.lighter( 200 ) );
// draw the note endmark, to hint the user to resize
p.setBrush( col );
if( width > 2 )
{
float leftIndent = 2.5;
float vertIndent = 3.5;
p.drawRect( QRectF (x + width - leftIndent, y + vertIndent, 1, KEY_LINE_HEIGHT - (2*vertIndent + 1) ) );
const int endmarkWidth = 3 - borderWidth;
p.drawRect( x + noteWidth - endmarkWidth, y, endmarkWidth, noteHeight );
}
}

Expand Down Expand Up @@ -2972,7 +2986,8 @@ void PianoRoll::paintEvent(QPaintEvent * pe )
// note
drawNoteRect( p, x + WHITE_KEY_WIDTH,
y_base - key * KEY_LINE_HEIGHT,
note_width, note, noteColor(), noteBorderRadiusX(), noteBorderRadiusY(), selectedNoteColor() );
note_width, note, noteColor(), selectedNoteColor(),
noteOpacity(), borderlessNotes() );
}

// draw note editing stuff
Expand Down Expand Up @@ -3010,12 +3025,12 @@ void PianoRoll::paintEvent(QPaintEvent * pe )
( (float)( (PanningRight - PanningLeft ) ) ) *
( (float)( noteEditBottom() - noteEditTop() ) );

p.drawLine( QLineF( noteEditLeft() + x + 0.5, noteEditTop() + 0.5 +
p.drawLine( QLine( noteEditLeft() + x, noteEditTop() +
( (float)( noteEditBottom() - noteEditTop() ) ) / 2.0f,
noteEditLeft() + x + 0.5, editHandleTop + 0.5 ) );
noteEditLeft() + x , editHandleTop ) );
}
editHandles << QPointF ( x + noteEditLeft() + 0.5,
editHandleTop + 1.5 );
editHandles << QPoint ( x + noteEditLeft(),
editHandleTop );

if( note->hasDetuningInfo() )
{
Expand Down