Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show result of Color selection in Qt?

What is the best way to give the user feedback for a color selection?
I have a dialog with a "Select Color" push button which pops a QColorDialog. After the selection is made I want to show the user the color selected.
Usually I do this using a QLabel and changing it's background color in the palette. This method is cumbersome and I think not very portable.

Is there a standard way of doing this?

like image 556
shoosh Avatar asked Nov 12 '08 03:11

shoosh


3 Answers

The way I'm doing it is the following :

I actually change the color of the button, to reflect the user choice. To do this, I'm using the Qt style sheet, which ensure it is portable :

const QString COLOR_STYLE("QPushButton { background-color : %1; color : %2; }");

QColor ChosenColor; // Color chosen by the user with QColorDialog
QColor IdealTextColor = getIdealTextColor(ChosenColor);
btnChooseColor->setStyleSheet(COLOR_STYLE.arg(ChosenColor.name()).arg(IdealTextColor.name()));

To make sure the label of the button is always readable, I'm calling the method getIdealTextColor(), which is a method I've found from a codeproject article :

//==============================================================================
//  Nom : getIdealTextColor
//! @return an ideal label color, based on the given background color.
//! Based on http://www.codeproject.com/cs/media/IdealTextColor.asp
//==============================================================================
QColor JSPreferencesDlg::getIdealTextColor(const QColor& rBackgroundColor) const
{
    const int THRESHOLD = 105;
    int BackgroundDelta = (rBackgroundColor.red() * 0.299) + (rBackgroundColor.green() * 0.587) + (rBackgroundColor.blue() * 0.114);
    return QColor((255- BackgroundDelta < THRESHOLD) ? Qt::black : Qt::white);
}
like image 65
Jérôme Avatar answered Nov 11 '22 02:11

Jérôme


QColor chosenColor = QColorDialog::getColor(); //return the color chosen by user
setColorButton->setBackgroundColor(chosenColor);
setColorButton->setAutoFillBackground(true);
setColorButton->setFlat(true);

how about this?

like image 37
Shihe Zhang Avatar answered Nov 11 '22 03:11

Shihe Zhang


You can easily make your own color choosing button by sub-classing from QPushButton and overriding its paintEvent. This should give you a nice, native-looking color button. I would try something like the following.

colorbutton.h:

#ifndef COLORBUTTON_H
#define COLORBUTTON_H

#include <QtGui>

class ColorButton : public QPushButton
{
    Q_OBJECT
public:
    explicit ColorButton(const QColor & color = Qt::black, QWidget *parent = 0);
    QColor getColor();

signals:
    void colorChanged(QColor);

public slots:
    void changeColor(const QColor &);
    void chooseColor();
    void paintEvent(QPaintEvent *event);

private:
    QColor currentColor;
};

#endif // COLORBUTTON_H

colorbutton.cpp:

#include "colorbutton.h"

ColorButton::ColorButton(const QColor & color, QWidget *parent) :
    QPushButton(parent)
{
    this->setMinimumWidth(50);
    currentColor = color;
    connect(this, SIGNAL(clicked()), this, SLOT(chooseColor()));
}

QColor ColorButton::getColor()
{
    return currentColor;
}

void ColorButton::changeColor(const QColor & color)
{
    currentColor = color;
    colorChanged(currentColor);
}

void ColorButton::chooseColor()
{
    QColor color = QColorDialog::getColor(currentColor, this);
    if (color.isValid())
        changeColor(color);
}

void ColorButton::paintEvent(QPaintEvent *event)
{
    QPushButton::paintEvent(event);

    int colorPadding = 5;

    QRect rect = event->rect();
    QPainter painter( this );
    painter.setBrush( QBrush( currentColor ) );
    painter.setPen("#CECECE");
    rect.adjust(colorPadding, colorPadding, -1-colorPadding, -1-colorPadding);
    painter.drawRect(rect);
}

Please note that most of this was made up on spot and has not been completely fine tuned yet.

like image 2
Ben Gates Avatar answered Nov 11 '22 02:11

Ben Gates