Skip to content
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

Jump to bottom

Refactored PR: Theming of disabled knobs #5549

Merged
merged 8 commits into from
Oct 30, 2020
Merged

Refactored PR: Theming of disabled knobs #5549

Show file tree
Hide file tree
Changes from all 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/classic/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ QMdiArea {
background-image: url(resources:background_artwork.png);
}

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

AutomationEditor {
background-color: rgb(0, 0, 0);
color: #e0e0e0;
Expand Down
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
26 changes: 16 additions & 10 deletions include/Knob.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
#ifndef KNOB_H
#define KNOB_H

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

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


void convertPixmapToGrayScale(QPixmap &pixMap);

class LMMS_EXPORT Knob : public QWidget, public FloatModelView
{
Expand All @@ -58,8 +61,12 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView
// Unfortunately, the gradient syntax doesn't create our gradient
// correctly so we need to do this:
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

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

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

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 +81,6 @@ 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();

// TODO: remove
inline void setHintText( const QString & _txt_before,
Expand Down Expand Up @@ -108,10 +114,6 @@ class LMMS_EXPORT Knob : public QWidget, public FloatModelView

QColor outerColor() const;
void setOuterColor( const QColor & c );
QColor lineColor() const;
void setlineColor( const QColor & c );
QColor arcColor() const;
void setarcColor( const QColor & c );

QColor textColor() const;
void setTextColor( const QColor & c );
Expand All @@ -134,6 +136,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 +172,7 @@ private slots:

QString m_label;

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

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 @@ -187,8 +190,11 @@ private slots:
float m_outerRadius;
float m_lineWidth;
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
110 changes: 53 additions & 57 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 All @@ -45,6 +46,7 @@
#include "MainWindow.h"
#include "ProjectJournal.h"
#include "Song.h"
#include "stdshims.h"
#include "StringPairDrag.h"
#include "TextFloat.h"

Expand All @@ -57,7 +59,6 @@ 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_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 = make_unique<QPixmap>(QPixmap(embed::getIconPixmap(knobFilename.toUtf8().constData())));
if (!this->isEnabled())
{
convertPixmapToGrayScale(*m_knobPixmap.get());
}
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 @@ -307,35 +306,6 @@ void Knob::setOuterColor( const QColor & c )



QColor Knob::lineColor() const
{
return m_lineColor;
}



void Knob::setlineColor( const QColor & c )
{
m_lineColor = c;
}



QColor Knob::arcColor() const
{
return m_arcColor;
}



void Knob::setarcColor( const QColor & c )
{
m_arcColor = c;
}




QColor Knob::textColor() const
{
return m_textColor;
Expand Down Expand Up @@ -382,6 +352,10 @@ 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;

if( updateAngle() == false && !m_cache.isNull() )
{
_p->drawImage( 0, 0, m_cache );
Expand Down Expand Up @@ -440,33 +414,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(currentArcColor, 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.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 +442,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 +803,35 @@ 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(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)
{
const auto pix = temp.pixelColor(i, j);
const auto gscale = 0.2126 * pix.redF() + 0.7152 * pix.greenF() + 0.0722 * pix.blueF();
const auto pixGray = QColor::fromRgbF(gscale, gscale, gscale, pix.alphaF());
temp.setPixelColor(i, j, pixGray);
}
}
pixMap.convertFromImage(temp);
}