Skip to content

Update LMMS knob design #5952

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

Open
LostRobotMusic wants to merge 12 commits into
base: master
Choose a base branch
from
+112 −53
Open

Update LMMS knob design #5952

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7f1c954
Merge pull request #8 from LMMS/master
LostRobotMusic Jun 21, 2019
0bb50a8
Merge pull request #11 from LMMS/master
LostRobotMusic Aug 7, 2019
a332d47
Merge pull request #12 from LMMS/master
LostRobotMusic Aug 30, 2019
5f0aacc
Merge pull request #13 from LMMS/master
LostRobotMusic Sep 4, 2019
6e5132b
Merge pull request #14 from LMMS/master
LostRobotMusic Nov 7, 2019
36eece4
Merge pull request #16 from LMMS/master
LostRobotMusic Mar 15, 2020
b33596a
Merge pull request #17 from LMMS/master
LostRobotMusic Apr 19, 2020
d691fb0
Merge pull request #18 from LMMS/master
LostRobotMusic May 8, 2020
e6474d4
Merge pull request #20 from LMMS/master
LostRobotMusic Oct 25, 2020
a1409ed
Merge pull request #21 from LMMS/master
LostRobotMusic Mar 2, 2021
de9e21e
Merge branch 'master' of https://github.com/DouglasDGI/lmms
LostRobotMusic Mar 9, 2021
7bae9cc
Improve LMMS knob graphics
LostRobotMusic Mar 15, 2021
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
10 changes: 9 additions & 1 deletion data/themes/classic/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,16 @@ QMdiArea {
}

Knob {
qproperty-lineActiveColor: rgb(171, 177, 189);
qproperty-lineInactiveColor: rgb(120, 120, 120);
qproperty-arcInactiveColor: rgba(120, 120, 120, 70);
qproperty-arcTopActiveColor: rgba(29, 226, 118);
qproperty-arcTopInactiveColor: rgba(120, 120, 120);
qproperty-arcBottomActiveColor: rgba(120, 120, 120, 70);
qproperty-arcBottomInactiveColor: rgba(120, 120, 120, 70);
qproperty-centerTopActiveColor: rgba(77, 80, 91);
qproperty-centerTopInactiveColor: rgba(77, 80, 91);
qproperty-centerBottomActiveColor: rgba(37, 38, 43);
qproperty-centerBottomInactiveColor: rgba(37, 38, 43);
}

AutomationEditor {
Expand Down
10 changes: 9 additions & 1 deletion data/themes/default/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,16 @@ FileBrowser QCheckBox
}

Knob {
qproperty-lineActiveColor: rgb(171, 177, 189);
qproperty-lineInactiveColor: rgb(120, 120, 120);
qproperty-arcInactiveColor: rgba(120, 120, 120, 70);
qproperty-arcTopActiveColor: rgba(29, 226, 118);
qproperty-arcTopInactiveColor: rgba(120, 120, 120);
qproperty-arcBottomActiveColor: rgba(120, 120, 120, 70);
qproperty-arcBottomInactiveColor: rgba(120, 120, 120, 70);
qproperty-centerTopActiveColor: rgba(77, 80, 91);
qproperty-centerTopInactiveColor: rgba(77, 80, 91);
qproperty-centerBottomActiveColor: rgba(37, 38, 43);
qproperty-centerBottomInactiveColor: rgba(37, 38, 43);
}

AutomationEditor {
Expand Down
26 changes: 21 additions & 5 deletions include/Knob.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,14 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView

Q_PROPERTY(QColor lineActiveColor MEMBER m_lineActiveColor)
Q_PROPERTY(QColor lineInactiveColor MEMBER m_lineInactiveColor)
Q_PROPERTY(QColor arcActiveColor MEMBER m_arcActiveColor)
Q_PROPERTY(QColor arcInactiveColor MEMBER m_arcInactiveColor)
Q_PROPERTY(QColor arcTopActiveColor MEMBER m_arcTopActiveColor)
Q_PROPERTY(QColor arcTopInactiveColor MEMBER m_arcTopInactiveColor)
Q_PROPERTY(QColor arcBottomActiveColor MEMBER m_arcBottomActiveColor)
Q_PROPERTY(QColor arcBottomInactiveColor MEMBER m_arcBottomInactiveColor)
Q_PROPERTY(QColor centerTopActiveColor MEMBER m_centerTopActiveColor)
Q_PROPERTY(QColor centerTopInactiveColor MEMBER m_centerTopInactiveColor)
Q_PROPERTY(QColor centerBottomActiveColor MEMBER m_centerBottomActiveColor)
Q_PROPERTY(QColor centerBottomInactiveColor MEMBER m_centerBottomInactiveColor)

mapPropertyFromModel(bool,isVolumeKnob,setVolumeKnob,m_volumeKnob);
mapPropertyFromModel(float,volumeRatio,setVolumeRatio,m_volumeRatio);
Expand Down Expand Up @@ -120,6 +126,8 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView
QColor textColor() const;
void setTextColor( const QColor & c );

void setOrigSize( float knobWidth, float knobHeight );


signals:
void sliderPressed();
Expand Down Expand Up @@ -197,13 +205,21 @@ private slots:

QColor m_lineActiveColor;
QColor m_lineInactiveColor;
QColor m_arcActiveColor;
QColor m_arcInactiveColor;

QColor m_arcTopActiveColor;
QColor m_arcTopInactiveColor;
QColor m_arcBottomActiveColor;
QColor m_arcBottomInactiveColor;
QColor m_centerTopActiveColor;
QColor m_centerTopInactiveColor;
QColor m_centerBottomActiveColor;
QColor m_centerBottomInactiveColor;

QColor m_textColor;

knobTypes m_knobNum;

float m_origWidth;
float m_origHeight;
} ;

#endif
119 changes: 73 additions & 46 deletions src/gui/widgets/Knob.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,32 +96,7 @@ void Knob::initUi( const QString & _name )
setOuterRadius( 10.0f );
setFocusPolicy( Qt::ClickFocus );

// This is a workaround to enable style sheets for knobs which are not styled knobs.
//
// It works as follows: the palette colors that are assigned as the line color previously
// had been hard coded in the drawKnob method for the different knob types. Now the
// drawKnob method uses the line color to draw the lines. By assigning the palette colors
// as the line colors here the knob lines will be drawn in this color unless the stylesheet
// overrides that color.
switch (knobNum())
{
case knobSmall_17:
case knobBright_26:
case knobDark_28:
m_lineActiveColor = QApplication::palette().color(QPalette::Active, QPalette::WindowText);
m_arcActiveColor = QColor(QApplication::palette().color(
QPalette::Active, QPalette::WindowText));
m_arcActiveColor.setAlpha(70);
break;
case knobVintage_32:
m_lineActiveColor = QApplication::palette().color(QPalette::Active, QPalette::Shadow);
m_arcActiveColor = QColor(QApplication::palette().color(
QPalette::Active, QPalette::Shadow));
m_arcActiveColor.setAlpha(70);
break;
default:
break;
}


doConnections();
}
Expand All @@ -138,15 +113,19 @@ void Knob::onKnobNumUpdated()
{
case knobDark_28:
knobFilename = "knob01";
setOrigSize( 28, 28 );
break;
case knobBright_26:
knobFilename = "knob02";
setOrigSize( 26, 26 );
break;
case knobSmall_17:
knobFilename = "knob03";
setOrigSize( 18, 18 );
break;
case knobVintage_32:
knobFilename = "knob05";
setOrigSize( 32, 32 );
break;
case knobStyled: // only here to stop the compiler from complaining
break;
Expand All @@ -163,6 +142,13 @@ void Knob::onKnobNumUpdated()
}


void Knob::setOrigSize( float knobWidth, float knobHeight )
{
setFixedSize(knobWidth, knobHeight);
m_origWidth = knobWidth;
m_origHeight = knobHeight;
}



void Knob::setLabel( const QString & txt )
Expand Down Expand Up @@ -194,8 +180,9 @@ void Knob::setHtmlLabel(const QString &htmltxt)

if (m_knobPixmap)
{
setFixedSize(m_knobPixmap->width(),
m_knobPixmap->height() + 15);
setFixedSize( qMax<int>( m_origWidth,
QFontMetrics( pointSizeF( font(), 6.5) ).width( m_label ) ),
m_origHeight + 10 );
Comment on lines +183 to +185
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

Kind of hard to read with this spacing and all.

Suggested change
setFixedSize( qMax<int>( m_origWidth,
QFontMetrics( pointSizeF( font(), 6.5) ).width( m_label ) ),
m_origHeight + 10 );
setFixedSize(
qMax<int>(m_origWidth, QFontMetrics(pointSizeF(font(), 6.5)).width(m_label)),
m_origHeight + 10
);

}

update();
Expand Down Expand Up @@ -380,8 +367,36 @@ bool Knob::updateAngle()
void Knob::drawKnob( QPainter * _p )
{
bool enabled = this->isEnabled();
QColor currentArcColor = enabled ? m_arcActiveColor : m_arcInactiveColor;
QColor currentLineColor = enabled ? m_lineActiveColor : m_lineInactiveColor;
QColor currentArcTopColor;
QColor currentArcBottomColor;
QColor currentLineColor;
QColor currentCenterTopColor;
QColor currentCenterBottomColor;

switch (knobNum())
{
case knobSmall_17: case knobBright_26: case knobDark_28:
{
currentArcTopColor = enabled ? m_arcTopActiveColor : m_arcTopInactiveColor;
currentArcBottomColor = enabled ? m_arcBottomActiveColor : m_arcBottomInactiveColor;
currentLineColor = enabled ? m_lineActiveColor : m_lineInactiveColor;
currentCenterTopColor = enabled ? m_centerTopActiveColor : m_centerTopInactiveColor;
currentCenterBottomColor = enabled ? m_centerBottomActiveColor : m_centerBottomInactiveColor;
break;
}
case knobVintage_32:
{
currentLineColor = QApplication::palette().color(QPalette::Active, QPalette::Shadow);
currentArcTopColor = QColor(QApplication::palette().color(QPalette::Active, QPalette::Shadow));
currentArcBottomColor = QColor(QApplication::palette().color(QPalette::Active, QPalette::Shadow));
currentArcBottomColor.setAlpha(70);
currentCenterTopColor = enabled ? m_centerTopActiveColor : m_centerTopInactiveColor;
currentCenterBottomColor = enabled ? m_centerBottomActiveColor : m_centerBottomInactiveColor;
Comment on lines +393 to +394
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

currentCenterTopColor and currentCenterBottomColor are the same between all knobs, we can probably pull this out and always set it after the switch.

break;
}
default:
break;
Comment on lines +397 to +398
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

If we remove default a new knob size added should cause the compiler will raise a warning about not having all cases covered.

}

if( updateAngle() == false && !m_cache.isNull() )
{
Expand All @@ -394,7 +409,7 @@ void Knob::drawKnob( QPainter * _p )

QPainter p( &m_cache );

QPoint mid;
QPointF mid;

if( m_knobNum == knobStyled )
{
Expand Down Expand Up @@ -426,56 +441,68 @@ void Knob::drawKnob( QPainter * _p )
}


// Old-skool knobs
const float radius = m_knobPixmap->width() / 2.0f - 1;
mid = QPoint( width() / 2, m_knobPixmap->height() / 2 );

p.drawPixmap( static_cast<int>(
width() / 2 - m_knobPixmap->width() / 2 ), 0,
*m_knobPixmap );
const float radius = m_origWidth / 2.f - 4.5f;
mid = QPointF( width() / 2, ceil(m_origHeight / 2.f) );

p.setRenderHint( QPainter::Antialiasing );

if (m_knobNum == knobSmall_17 || m_knobNum == knobBright_26 || m_knobNum == knobDark_28)
{
QLinearGradient centerGrad(0, 5, 0.f, m_origHeight - 5.f);
centerGrad.setColorAt(0, QColor(77, 80, 91));
centerGrad.setColorAt(1, QColor(37, 38, 43));
//p.setPen(QPen(centerGrad, 0));
p.setPen( QPen( QColor(11, 12, 17), 1, Qt::SolidLine, Qt::RoundCap ) );
Comment on lines +452 to +455
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

Should these colors be customizable, too?

p.setBrush(centerGrad);
p.drawEllipse(mid, radius, radius);
}
else
{
p.drawPixmap( static_cast<int>(
width() / 2 - m_knobPixmap->width() / 2 ), 0,
*m_knobPixmap );
Comment on lines +461 to +463
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

Suggested change
p.drawPixmap( static_cast<int>(
width() / 2 - m_knobPixmap->width() / 2 ), 0,
*m_knobPixmap );
p.drawPixmap(static_cast<int>(width() / 2 - m_knobPixmap->width() / 2), 0, *m_knobPixmap);

}

const int centerAngle = angleFromValue( model()->inverseScaledValue( model()->centerValue() ), model()->minValue(), model()->maxValue(), m_totalAngle );

const int arcLineWidth = 2;
const int arcRectSize = m_knobPixmap->width() - arcLineWidth;
const int arcRectSize = m_origWidth - arcLineWidth;

p.setPen(QPen(currentArcColor, 2));
p.setPen(QPen(currentArcBottomColor, 2));
p.drawArc( mid.x() - arcRectSize/2, 1, arcRectSize, arcRectSize, 315*16, 16*m_totalAngle );

p.setPen(QPen(currentLineColor, 2));
switch( m_knobNum )
{
case knobSmall_17:
{
p.drawLine( calculateLine( mid, radius-2 ) );
p.drawLine( calculateLine( mid, radius-1.5f, 4 ) );
Copy link
Contributor

@Veratil Veratil Mar 16, 2021

Choose a reason for hiding this comment

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

knobSmall_17 and knobBright_26 are the same, we could combine these cases.

break;
}
case knobBright_26:
{
p.drawLine( calculateLine( mid, radius-5 ) );
p.drawLine( calculateLine( mid, radius-1.5f, 4 ) );
break;
}
case knobDark_28:
{
const float rb = qMax<float>( ( radius - 10 ) / 3.0,
0.0 );
const float re = qMax<float>( ( radius - 4 ), 0.0 );
const float rb = qMax<float>( ( radius - 10 ) / 3.0, 0.0 );
const float re = qMax<float>( ( radius - 1.5f ), 0.0 );
QLineF ln = calculateLine( mid, re, rb );
ln.translate( 1, 1 );
p.drawLine( ln );
break;
}
case knobVintage_32:
{
p.drawLine( calculateLine( mid, radius-2, 2 ) );
p.drawLine( calculateLine( mid, radius + 2, 2 ) );
break;
}
case knobStyled:
break;
}

p.setPen( QPen( currentArcTopColor, 2 ) );
p.drawArc( mid.x() - arcRectSize/2, 1, arcRectSize, arcRectSize, (90-centerAngle)*16, -16*(m_angle-centerAngle) );

p.end();
Expand Down