Skip to content

Refactored PR: Theming of disabled knobs #5549

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
zonkmachine merged 8 commits into from
Oct 30, 2020
+79 −67
Merged

Refactored PR: Theming of disabled knobs #5549

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
291d651
Add example for theming of disabled knobs
thmueller64 May 21, 2020
5c2c4f1
Add properties for theming of disabled knobs. Minor refactoring: Use …
thmueller64 May 21, 2020
ba1b2a6
Theming of disabled knobs. Minor refactoring.
thmueller64 May 21, 2020
36742fb
Update include/Knob.h
thmueller64 Aug 16, 2020
57c32c2
Add properties for disabled knobs.
thmueller64 Aug 16, 2020
5c5c494
Update src/gui/widgets/Knob.cpp
thmueller64 Aug 17, 2020
232ecf3
Changes suggested by review.
thmueller64 Aug 17, 2020
ba39988
Remove getters and setters for arc and line colors. Include QPixmap.
thmueller64 Aug 25, 2020
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
5 changes: 5 additions & 0 deletions data/themes/default/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ QMdiArea {
background-color: #111314;
}

Knob {
qproperty-lineInactiveColor: rgb(120, 120, 120);
qproperty-arcInactiveColor: rgba(120, 120, 120, 70);
}

AutomationEditor {
color: #ffffff;
background-color: #141616;
Expand Down
18 changes: 16 additions & 2 deletions include/Knob.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
#ifndef KNOB_H
#define KNOB_H

#include <memory>
#include <QWidget>
#include <QtCore/QPoint>

Expand All @@ -41,6 +42,7 @@ enum knobTypes
} ;


void convertPixmapToGrayScale(std::unique_ptr<QPixmap> &pixMap);

class LMMS_EXPORT Knob : public QWidget, public FloatModelView
{
Expand All @@ -60,6 +62,12 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView
Q_PROPERTY(QColor outerColor READ outerColor WRITE setOuterColor)
Q_PROPERTY(QColor lineColor READ lineColor WRITE setlineColor)
Q_PROPERTY(QColor arcColor READ arcColor WRITE setarcColor)

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)
Comment on lines +65 to +68
Copy link
Contributor

@Veratil Veratil Jun 29, 2020

Choose a reason for hiding this comment

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

One thing that might be cool to do and allow even cooler themes is to allow gradients instead of single colors. Changing these to QBrush would allow you to define gradients or colors.

Copy link
Contributor Author

@thmueller64 thmueller64 Jun 30, 2020

Choose a reason for hiding this comment

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

Thanks @Veratil for the suggestion. I replaced QColor by QBrush, below is an example. You get the idea from the picture, but a QLinearGradient does not result in the intended behavior here, see e.g. the red color at low volumes (I think this is due to the gradient being applied independent of the length of the active line). Furthermore, you can observe that m_lineColor is used both for the "middle line" and the active part of the "arc line".
Maybe we could address this feature separately?

qbrush_knob

Copy link
Contributor

@Veratil Veratil Jun 30, 2020

Choose a reason for hiding this comment

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

You wouldn't use a linear gradient in that instance, you'd use a conical gradient in the CSS. Example from Qt documentation:

/* conical gradient from white to green */
QTextEdit {
    background: qconicalgradient(cx:0.5, cy:0.5, angle:30,
                stop:0 white, stop:1 #00FF00)
}

At the same time though, if you wanted single color you can define the brush to be the normal rgba(...).


mapPropertyFromModel(bool,isVolumeKnob,setVolumeKnob,m_volumeKnob);
mapPropertyFromModel(float,volumeRatio,setVolumeRatio,m_volumeRatio);

Expand All @@ -74,7 +82,7 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView
Knob( knobTypes _knob_num, QWidget * _parent = NULL, const QString & _name = QString() );
Knob( QWidget * _parent = NULL, const QString & _name = QString() ); //!< default ctor
Knob( const Knob& other ) = delete;
virtual ~Knob();
virtual ~Knob() {};

// TODO: remove
inline void setHintText( const QString & _txt_before,
Expand Down Expand Up @@ -134,6 +142,7 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView
void mouseDoubleClickEvent( QMouseEvent * _me ) override;
void paintEvent( QPaintEvent * _me ) override;
void wheelEvent( QWheelEvent * _me ) override;
void changeEvent(QEvent * ev) override;

virtual float getValue( const QPoint & _p );

Expand Down Expand Up @@ -169,7 +178,7 @@ private slots:

QString m_label;

QPixmap * m_knobPixmap;
std::unique_ptr<QPixmap> m_knobPixmap;
Copy link
Member

@DomClark DomClark Aug 17, 2020

Choose a reason for hiding this comment

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

It might be a good idea to explicitly #include <QPixmap> - it's currently available via <QWidget>, but if this is changed to use a forward declaration, the unique_ptr here will fail to compile since QPixmap's destructor won't be declared.

BoolModel m_volumeKnob;
FloatModel m_volumeRatio;

Expand All @@ -189,6 +198,11 @@ private slots:
QColor m_outerColor;
QColor m_lineColor; //!< unused yet
QColor m_arcColor; //!< unused yet

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

QColor m_textColor;

Expand Down
83 changes: 55 additions & 28 deletions src/gui/widgets/Knob.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
*
*/

#include <memory>
#include <QApplication>
#include <QBitmap>
#include <QFontMetrics>
Expand Down Expand Up @@ -57,7 +58,7 @@ Knob::Knob( knobTypes _knob_num, QWidget * _parent, const QString & _name ) :
QWidget( _parent ),
FloatModelView( new FloatModel( 0, 0, 0, 1, NULL, _name, true ), this ),
m_label( "" ),
m_knobPixmap( NULL ),
m_knobPixmap( nullptr ),
m_volumeKnob( false ),
m_volumeRatio( 100.0, 0.0, 1000000.0 ),
m_buttonPressed( false ),
Expand Down Expand Up @@ -104,10 +105,16 @@ void Knob::initUi( const QString & _name )
case knobSmall_17:
case knobBright_26:
case knobDark_28:
setlineColor(QApplication::palette().color( QPalette::Active, QPalette::WindowText ));
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:
setlineColor(QApplication::palette().color( QPalette::Active, QPalette::Shadow ));
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;
Expand Down Expand Up @@ -143,26 +150,18 @@ void Knob::onKnobNumUpdated()
}

// If knobFilename is still empty here we should get the fallback pixmap of size 1x1
m_knobPixmap = new QPixmap( embed::getIconPixmap( knobFilename.toUtf8().constData() ) );

m_knobPixmap.reset(new QPixmap(embed::getIconPixmap(knobFilename.toUtf8().constData())));
if (!this->isEnabled())
{
convertPixmapToGrayScale(m_knobPixmap);
}
setFixedSize( m_knobPixmap->width(), m_knobPixmap->height() );
}
}




Knob::~Knob()
{
if( m_knobPixmap )
{
delete m_knobPixmap;
}
}




void Knob::setLabel( const QString & txt )
{
m_label = txt;
Expand Down Expand Up @@ -382,6 +381,10 @@ bool Knob::updateAngle()

void Knob::drawKnob( QPainter * _p )
{
bool enabled = this->isEnabled();
setarcColor(enabled ? m_arcActiveColor : m_arcInactiveColor);
setlineColor(enabled ? m_lineActiveColor : m_lineInactiveColor);

if( updateAngle() == false && !m_cache.isNull() )
{
_p->drawImage( 0, 0, m_cache );
Expand Down Expand Up @@ -440,33 +443,24 @@ void Knob::drawKnob( QPainter * _p )
const int arcLineWidth = 2;
const int arcRectSize = m_knobPixmap->width() - arcLineWidth;

QColor col;
if( m_knobNum == knobVintage_32 )
{ col = QApplication::palette().color( QPalette::Active, QPalette::Shadow ); }
else
{ col = QApplication::palette().color( QPalette::Active, QPalette::WindowText ); }
col.setAlpha( 70 );

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

p.setPen(QPen(lineColor(), 2));
switch( m_knobNum )
{
case knobSmall_17:
{
p.setPen( QPen( lineColor(), 2 ) );
p.drawLine( calculateLine( mid, radius-2 ) );
break;
}
case knobBright_26:
{
p.setPen( QPen( lineColor(), 2 ) );
p.drawLine( calculateLine( mid, radius-5 ) );
break;
}
case knobDark_28:
{
p.setPen( QPen( lineColor(), 2 ) );
const float rb = qMax<float>( ( radius - 10 ) / 3.0,
0.0 );
const float re = qMax<float>( ( radius - 4 ), 0.0 );
Expand All @@ -477,7 +471,6 @@ void Knob::drawKnob( QPainter * _p )
}
case knobVintage_32:
{
p.setPen( QPen( lineColor(), 2 ) );
p.drawLine( calculateLine( mid, radius-2, 2 ) );
break;
}
Expand Down Expand Up @@ -839,3 +832,37 @@ void Knob::doConnections()
this, SLOT( update() ) );
}
}


void Knob::changeEvent(QEvent * ev)
{
if (ev->type() == QEvent::EnabledChange)
{
onKnobNumUpdated();
if (!m_label.isEmpty())
{
setLabel(m_label);
}
m_cache = QImage();
update();
}
}


void convertPixmapToGrayScale(std::unique_ptr<QPixmap> &pixMap)
{
QImage temp = pixMap->toImage().convertToFormat(QImage::Format_ARGB32);
for (int i = 0; i < temp.height(); ++i)
{
for (int j = 0; j < temp.width(); ++j)
{
QColor pix;
pix = temp.pixelColor(i, j);
quint8 gscale = quint8((0.2126*pix.red() + 0.7152*pix.green() + 0.0722*pix.blue()));
QRgba64 pix_gray64;
pix_gray64 = QRgba64::fromRgba(gscale, gscale, gscale, quint8(pix.alpha()));
temp.setPixelColor(i, j, pix_gray64);
}
}
pixMap->convertFromImage(temp);
}