Skip to content

Commit

Permalink
Draw flat, borderless, semi-transparent and sharp-cornered notes (#2827)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@Umcaruje
Umcaruje authored Jun 9, 2016
1 parent 9eec9a0 commit 1abbbc2
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 57 deletions.
6 changes: 3 additions & 3 deletions data/themes/classic/style.css
View file
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-noteBorders: true; /* boolean property, set false to have borderless notes */
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
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-noteBorders: false; /* boolean property, set false to have borderless notes */
qproperty-selectedNoteColor: #006b65;
qproperty-barColor: #078f3a;
qproperty-markedSemitoneColor: #06170E;
/* Text on the white piano keys */
Expand Down Expand Up @@ -558,7 +558,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
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,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 noteBorders READ noteBorders WRITE setNoteBorders )
public:
enum EditModes
{
Expand Down Expand Up @@ -117,10 +117,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 @@ -131,6 +127,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 noteBorders() const;
void setNoteBorders( const bool b );


protected:
Expand All @@ -149,7 +149,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 @@ -374,13 +374,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_noteBorders;

signals:
void positionChanged( const MidiTime & );
Expand Down
93 changes: 54 additions & 39 deletions src/gui/editors/PianoRoll.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,13 +193,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_noteBorders( true )
{
// gui names of edit modes
m_nemStr.push_back( tr( "Note Velocity" ) );
Expand Down Expand Up @@ -749,18 +749,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 @@ -791,9 +779,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::noteBorders() const
{ return m_noteBorders; }

void PianoRoll::setNoteBorders( const bool b )
{ m_noteBorders = 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 borders )
{
++x;
++y;
Expand All @@ -804,8 +808,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 @@ -815,37 +819,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 = borders ? 1 : 0;

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 ( borders )
{
p.setPen( col );
}
else
{
p.setPen( Qt::NoPen );
}

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 @@ -2975,7 +2989,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(), noteBorders() );
}

// draw note editing stuff
Expand Down Expand Up @@ -3013,12 +3028,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

0 comments on commit 1abbbc2

Please sign in to comment.