Advise me how to create such a color picker with predefined colors

Question

I'm new to Qt. How can i create such a color picker control? I need to place it on another widget or dialog. Selected color should be rounded by white rectangle or made distinguishable in another way.

Which controls i need to use to create such a widget.

Answer 1

Not the best aproach, but it is only to show the idea with custom buttons, grid layout and stylesheet. Better will be to create custom Widget and paint inside it yourself.

mainwindow.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QWidget" name="gridLayoutWidget">
    <property name="geometry">
     <rect>
      <x>30</x>
      <y>20</y>
      <width>331</width>
      <height>201</height>
     </rect>
    </property>
    <layout class="QGridLayout" name="gridLayout"/>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>19</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

mainwindow.h

#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "custombutton.h"



MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->centralWidget->setStyleSheet("background-color: black;");


    QList<CustomButton *> * btnlist = new QList<CustomButton *>();

    CustomButton * btn = new CustomButton(Qt::green, btnlist);
    CustomButton * btn1 = new CustomButton(Qt::yellow, btnlist);
    CustomButton * btn2 = new CustomButton(Qt::red, btnlist);
    CustomButton * btn3 = new CustomButton(QColor(100,50,240), btnlist);
    CustomButton * btn4 = new CustomButton(QColor(50,50,240), btnlist);
    CustomButton * btn5 = new CustomButton(QColor(100,155,240), btnlist);
    CustomButton * btn6 = new CustomButton(QColor(200,50,240), btnlist);
    CustomButton * btn7 = new CustomButton(QColor(0,50,240), btnlist);

    btnlist->append(btn);
    btnlist->append(btn1);
    btnlist->append(btn2);
    btnlist->append(btn3);
    btnlist->append(btn4);
    btnlist->append(btn5);
    btnlist->append(btn6);
    btnlist->append(btn7);

    this->ui->gridLayout->addWidget(btn,1,1);
    this->ui->gridLayout->addWidget(btn1,1,2);
    this->ui->gridLayout->addWidget(btn2,1,3);
    this->ui->gridLayout->addWidget(btn3,1,4);
    this->ui->gridLayout->addWidget(btn4,1,5);

    this->ui->gridLayout->addWidget(btn5,2,1);
    this->ui->gridLayout->addWidget(btn6,2,2);
    this->ui->gridLayout->addWidget(btn7,2,3);
}

custombutton.h

#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QWidget>
#include <QPushButton>
#include <QColor>

class CustomButton : public QPushButton
{
public:
    CustomButton(QColor color, QList<CustomButton *> *);

public slots:
    void release(bool);

private:
    QList<CustomButton *>       * btn_list;

};

#endif // CUSTOMBUTTON_H

custombutton.cpp

#include "custombutton.h"



CustomButton::CustomButton(QColor color, QList<CustomButton *> * list)
{
    this->btn_list = list;
    QString StyleSheet = QString("QPushButton:checked { border: 2px solid white; background-color: %1; } QPushButton { border: 0px solid white; background-color: %1; }").arg(color.name());
    this->setCheckable(true);
    this->setStyleSheet(StyleSheet);
    this->setFixedSize(56, 56);
    this->show();
    connect(this, &CustomButton::toggled, this, &CustomButton::release );
}

void CustomButton::release(bool checked)
{
    int ind = this->btn_list->indexOf(this);
    CustomButton * tmp = this->btn_list->takeAt(ind);

    if(checked)
    {
        this->setChecked(true);

        for(int i = 0; i < this->btn_list->count(); i++)
        {
            this->btn_list->at(i)->setChecked(false);
        }
    }

    this->btn_list->append(this);
}

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

It is a working draft. Do not use this in release :) It is only to show an idea how this can be done.

Answer 2

Code that generates such a layout can roughly look like:

QWidget w;
QGridLayout *grid = new QGridLayout(&w);

std::vector<QString> colors{ "red", "blue", "green", "yellow",
                             "magenta", "darkblue", "darkgreen", "black" };

static const int buttonsPerRow = 5;
for (int i = 0; i < 15; ++i)
{
  QPushButton *btn = new QPushButton(&w);
  // Customize the colour button
  btn->setMaximumSize(16, 16);
  QString qss = QString("background-color: %1").arg(colors[i % colors.size()]);
  btn->setStyleSheet(qss);
  grid->addWidget(btn, i / buttonsPerRow, i % buttonsPerRow);
}

w.show();

Answer 3

You can use QtColorPicker : The QtColorPicker class provides a widget for selecting colors from a popup color grid.

Users can invoke the color picker by clicking on it, or by navigating to it and pressing Space. They can use the mouse or arrow keys to navigate between colors on the grid, and select a color by clicking or by pressing Enter or Space. The colorChanged() signal is emitted whenever the color picker's color changes.

References:

http://doc.qt.io/qt-4.8/qcolordialog.html

http://docs.huihoo.com/qt/solutions/4/qtcolorpicker/qtcolorpicker.html