improve palette editor ui

- remove redundant RGB label
- in color picker, instruct user to press SPACE
- add toggle between 15 and 24 bit depth displaying
This commit is contained in:
garak 2022-07-06 23:34:52 -04:00 committed by garakmon
parent ab6aa01973
commit 12d5f22475
4 changed files with 1019 additions and 987 deletions

View file

@ -6,110 +6,47 @@
<rect> <rect>
<x>0</x> <x>0</x>
<y>0</y> <y>0</y>
<width>357</width> <width>383</width>
<height>186</height> <height>243</height>
</rect> </rect>
</property> </property>
<property name="windowTitle"> <property name="windowTitle">
<string>Color Picker</string> <string>Color Picker</string>
</property> </property>
<layout class="QHBoxLayout" name="horizontalLayout"> <layout class="QVBoxLayout" name="verticalLayout_3">
<item> <item>
<widget class="QFrame" name="frame_4"> <widget class="QFrame" name="frame_2">
<property name="frameShape"> <property name="frameShape">
<enum>QFrame::NoFrame</enum> <enum>QFrame::Box</enum>
</property> </property>
<property name="frameShadow"> <property name="frameShadow">
<enum>QFrame::Plain</enum> <enum>QFrame::Plain</enum>
</property> </property>
<layout class="QVBoxLayout" name="verticalLayout"> <layout class="QHBoxLayout" name="horizontalLayout">
<item> <item>
<spacer name="verticalSpacer"> <widget class="QFrame" name="frame_4">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QLabel" name="viewport">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>120</width>
<height>120</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>120</width>
<height>120</height>
</size>
</property>
<property name="text">
<string/>
</property>
</widget>
</item>
<item>
<spacer name="verticalSpacer_2">
<property name="orientation">
<enum>Qt::Vertical</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QFrame" name="frame_3">
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Plain</enum>
</property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QFrame" name="frame">
<property name="frameShape"> <property name="frameShape">
<enum>QFrame::NoFrame</enum> <enum>QFrame::NoFrame</enum>
</property> </property>
<property name="frameShadow"> <property name="frameShadow">
<enum>QFrame::Plain</enum> <enum>QFrame::Plain</enum>
</property> </property>
<layout class="QHBoxLayout" name="horizontalLayout_2"> <layout class="QVBoxLayout" name="verticalLayout">
<item> <item>
<spacer name="horizontalSpacer"> <spacer name="verticalSpacer">
<property name="orientation"> <property name="orientation">
<enum>Qt::Horizontal</enum> <enum>Qt::Vertical</enum>
</property> </property>
<property name="sizeHint" stdset="0"> <property name="sizeHint" stdset="0">
<size> <size>
<width>40</width> <width>20</width>
<height>20</height> <height>40</height>
</size> </size>
</property> </property>
</spacer> </spacer>
</item> </item>
<item> <item>
<widget class="QFrame" name="frame_centralColor"> <widget class="QLabel" name="viewport">
<property name="sizePolicy"> <property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed"> <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch> <horstretch>0</horstretch>
@ -118,39 +55,30 @@
</property> </property>
<property name="minimumSize"> <property name="minimumSize">
<size> <size>
<width>50</width> <width>120</width>
<height>50</height> <height>120</height>
</size> </size>
</property> </property>
<property name="maximumSize"> <property name="maximumSize">
<size> <size>
<width>50</width> <width>120</width>
<height>50</height> <height>120</height>
</size> </size>
</property> </property>
<property name="baseSize"> <property name="text">
<size> <string/>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property> </property>
</widget> </widget>
</item> </item>
<item> <item>
<spacer name="horizontalSpacer_2"> <spacer name="verticalSpacer_2">
<property name="orientation"> <property name="orientation">
<enum>Qt::Horizontal</enum> <enum>Qt::Vertical</enum>
</property> </property>
<property name="sizeHint" stdset="0"> <property name="sizeHint" stdset="0">
<size> <size>
<width>40</width> <width>20</width>
<height>20</height> <height>40</height>
</size> </size>
</property> </property>
</spacer> </spacer>
@ -159,32 +87,131 @@
</widget> </widget>
</item> </item>
<item> <item>
<widget class="QLabel" name="label_RGB"> <widget class="QFrame" name="frame_3">
<property name="font"> <property name="frameShape">
<font> <enum>QFrame::NoFrame</enum>
<family>Courier</family>
</font>
</property> </property>
<property name="text"> <property name="frameShadow">
<string>RGB (000, 000, 000)</string> <enum>QFrame::Plain</enum>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="label_HEX">
<property name="font">
<font>
<family>Courier</family>
</font>
</property>
<property name="text">
<string>#FFFFFF</string>
</property> </property>
<layout class="QVBoxLayout" name="verticalLayout_2">
<item>
<widget class="QFrame" name="frame">
<property name="frameShape">
<enum>QFrame::NoFrame</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Plain</enum>
</property>
<layout class="QHBoxLayout" name="horizontalLayout_2">
<item>
<spacer name="horizontalSpacer">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<widget class="QFrame" name="frame_centralColor">
<property name="sizePolicy">
<sizepolicy hsizetype="Fixed" vsizetype="Fixed">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="maximumSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="baseSize">
<size>
<width>50</width>
<height>50</height>
</size>
</property>
<property name="frameShape">
<enum>QFrame::StyledPanel</enum>
</property>
<property name="frameShadow">
<enum>QFrame::Raised</enum>
</property>
</widget>
</item>
<item>
<spacer name="horizontalSpacer_2">
<property name="orientation">
<enum>Qt::Horizontal</enum>
</property>
<property name="sizeHint" stdset="0">
<size>
<width>40</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
</item>
<item>
<widget class="QLabel" name="label_RGB">
<property name="font">
<font>
<family>Courier</family>
</font>
</property>
<property name="text">
<string>RGB (000, 000, 000)</string>
</property>
</widget>
</item>
<item>
<widget class="QLabel" name="label_HEX">
<property name="font">
<font>
<family>Courier</family>
</font>
</property>
<property name="text">
<string>#FFFFFF</string>
</property>
</widget>
</item>
</layout>
</widget> </widget>
</item> </item>
</layout> </layout>
</widget> </widget>
</item> </item>
<item>
<widget class="QLabel" name="label_SPACE">
<property name="font">
<font>
<family>Courier</family>
</font>
</property>
<property name="text">
<string>press [SPACE] to capture color</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
</layout> </layout>
</widget> </widget>
<resources/> <resources/>

File diff suppressed because it is too large Load diff

View file

@ -36,7 +36,6 @@ private:
QList<QList<QSlider*>> sliders; QList<QList<QSlider*>> sliders;
QList<QList<QSpinBox *>> spinners; QList<QList<QSpinBox *>> spinners;
QList<QFrame*> frames; QList<QFrame*> frames;
QList<QLabel*> rgbLabels;
QList<QToolButton *> pickButtons; QList<QToolButton *> pickButtons;
QList<QLineEdit *> hexEdits; QList<QLineEdit *> hexEdits;
@ -59,6 +58,9 @@ private:
void setRgbFromHexEdit(int colorIndex); void setRgbFromHexEdit(int colorIndex);
void setRgbFromSpinners(int colorIndex); void setRgbFromSpinners(int colorIndex);
void setBitDepth(int bits);
int bitDepth = 24;
class HexCodeValidator : public QValidator { class HexCodeValidator : public QValidator {
virtual QValidator::State validate(QString &input, int &) const override { virtual QValidator::State validate(QString &input, int &) const override {
input = input.toUpper(); input = input.toUpper();

View file

@ -10,6 +10,10 @@
#include <QMessageBox> #include <QMessageBox>
static inline int rgb5(int rgb) { return round(static_cast<double>(rgb * 31) / 255.0); } static inline int rgb5(int rgb) { return round(static_cast<double>(rgb * 31) / 255.0); }
static inline int rgb8(int rgb) { return round(rgb * 255. / 31.); }
static inline int gbaRed(int rgb) { return rgb & 0x1f; }
static inline int gbaGreen(int rgb) { return (rgb >> 5) & 0x1f; }
static inline int gbaBlue(int rgb) { return (rgb >> 10) & 0x1f; }
PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset *secondaryTileset, int paletteId, QWidget *parent) : PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset *secondaryTileset, int paletteId, QWidget *parent) :
QMainWindow(parent), QMainWindow(parent),
@ -21,7 +25,7 @@ PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset
this->ui->setupUi(this); this->ui->setupUi(this);
this->ui->spinBox_PaletteId->setMinimum(0); this->ui->spinBox_PaletteId->setMinimum(0);
this->ui->spinBox_PaletteId->setMaximum(Project::getNumPalettesTotal() - 1); this->ui->spinBox_PaletteId->setMaximum(Project::getNumPalettesTotal() - 1);
this->sliders.clear(); this->sliders.clear();
for (int i = 0; i < 16; i++) { for (int i = 0; i < 16; i++) {
QList<QSlider *> rgbSliders; QList<QSlider *> rgbSliders;
@ -51,13 +55,7 @@ PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset
this->frames.clear(); this->frames.clear();
for (int i = 0; i < 16; i++) { for (int i = 0; i < 16; i++) {
this->frames.append(this->ui->container->findChild<QFrame *>("colorFrame_" + QString::number(i))); this->frames.append(this->ui->container->findChild<QFrame *>("colorFrame_" + QString::number(i)));
this->frames[i]->setFrameStyle(QFrame::Box | QFrame::Plain); this->frames[i]->setFrameStyle(QFrame::NoFrame);
}
this->rgbLabels.clear();
for (int i = 0; i < 16; i++) {
this->rgbLabels.append(this->ui->container->findChild<QLabel *>("rgb_" + QString::number(i)));
this->rgbLabels[i]->setStyleSheet("QLabel { font-family: \"Courier\" }");
} }
this->pickButtons.clear(); this->pickButtons.clear();
@ -70,8 +68,6 @@ PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset
for (int i = 0; i < 16; i++) { for (int i = 0; i < 16; i++) {
this->hexEdits.append(this->ui->container->findChild<QLineEdit *>("hex_" + QString::number(i))); this->hexEdits.append(this->ui->container->findChild<QLineEdit *>("hex_" + QString::number(i)));
this->hexEdits[i]->setValidator(hexValidator); this->hexEdits[i]->setValidator(hexValidator);
this->hexEdits[i]->setInputMask("HHHHHH");
this->hexEdits[i]->setMaxLength(6);
} }
// Connect to function that will update color when hex edit is changed // Connect to function that will update color when hex edit is changed
@ -91,6 +87,12 @@ PaletteEditor::PaletteEditor(Project *project, Tileset *primaryTileset, Tileset
connect(this->pickButtons[i], &QToolButton::clicked, [this, i](){ this->pickColor(i); }); connect(this->pickButtons[i], &QToolButton::clicked, [this, i](){ this->pickColor(i); });
} }
setBitDepth(24);
// Connect bit depth buttons
connect(this->ui->bit_depth_15, &QRadioButton::toggled, [this](bool checked){ if (checked) this->setBitDepth(15); });
connect(this->ui->bit_depth_24, &QRadioButton::toggled, [this](bool checked){ if (checked) this->setBitDepth(24); });
this->setPaletteId(paletteId); this->setPaletteId(paletteId);
this->commitEditHistory(this->ui->spinBox_PaletteId->value()); this->commitEditHistory(this->ui->spinBox_PaletteId->value());
this->restoreWindowState(); this->restoreWindowState();
@ -108,31 +110,41 @@ void PaletteEditor::updateColorUi(int colorIndex, QRgb rgb) {
int red = qRed(rgb); int red = qRed(rgb);
int green = qGreen(rgb); int green = qGreen(rgb);
int blue = qBlue(rgb); int blue = qBlue(rgb);
// sliders
this->sliders[colorIndex][0]->setValue(rgb5(red));
this->sliders[colorIndex][1]->setValue(rgb5(green));
this->sliders[colorIndex][2]->setValue(rgb5(blue));
// hex if (this->bitDepth == 15) {
QColor color(red, green, blue); // sliders
QString hexcode = color.name().remove(0, 1).toUpper(); this->sliders[colorIndex][0]->setValue(rgb5(red));
this->hexEdits[colorIndex]->setText(hexcode); this->sliders[colorIndex][1]->setValue(rgb5(green));
this->sliders[colorIndex][2]->setValue(rgb5(blue));
// spinners // hex
this->spinners[colorIndex][0]->setValue(red); int hex15 = (rgb5(blue) << 10) | (rgb5(green) << 5) | rgb5(red);
this->spinners[colorIndex][1]->setValue(green); QString hexcode = QString::number(hex15, 16).toUpper();
this->spinners[colorIndex][2]->setValue(blue);
// spinners
this->spinners[colorIndex][0]->setValue(rgb5(red));
this->spinners[colorIndex][1]->setValue(rgb5(green));
this->spinners[colorIndex][2]->setValue(rgb5(blue));
} else {
// sliders
this->sliders[colorIndex][0]->setValue(red);
this->sliders[colorIndex][1]->setValue(green);
this->sliders[colorIndex][2]->setValue(blue);
// hex
QColor color(red, green, blue);
QString hexcode = color.name().remove(0, 1).toUpper();
this->hexEdits[colorIndex]->setText(hexcode);
// spinners
this->spinners[colorIndex][0]->setValue(red);
this->spinners[colorIndex][1]->setValue(green);
this->spinners[colorIndex][2]->setValue(blue);
}
// frame // frame
QString stylesheet = QString("background-color: rgb(%1, %2, %3);").arg(red).arg(green).arg(blue); QString stylesheet = QString("background-color: rgb(%1, %2, %3);").arg(red).arg(green).arg(blue);
this->frames[colorIndex]->setStyleSheet(stylesheet); this->frames[colorIndex]->setStyleSheet(stylesheet);
// rgb label
int w = 3;
QChar spc = ' ';
int base = 10;
this->rgbLabels[colorIndex]->setText(QString(" RGB(%1, %2, %3)").arg(red, w, base, spc).arg(green, w, base, spc).arg(blue, w, base, spc));
setSignalsEnabled(true); setSignalsEnabled(true);
} }
@ -156,6 +168,68 @@ void PaletteEditor::setSignalsEnabled(bool enabled) {
} }
} }
void PaletteEditor::setBitDepth(int bits) {
setSignalsEnabled(false);
switch (bits) {
case 15:
for (int i = 0; i < 16; i++) {
// sliders ranged [0, 31] with 1 single step and 4 page step
this->sliders[i][0]->setSingleStep(1);
this->sliders[i][1]->setSingleStep(1);
this->sliders[i][2]->setSingleStep(1);
this->sliders[i][0]->setPageStep(4);
this->sliders[i][1]->setPageStep(4);
this->sliders[i][2]->setPageStep(4);
this->sliders[i][0]->setMaximum(31);
this->sliders[i][1]->setMaximum(31);
this->sliders[i][2]->setMaximum(31);
// spinners limited [0, 31] with 1 step
this->spinners[i][0]->setSingleStep(1);
this->spinners[i][1]->setSingleStep(1);
this->spinners[i][2]->setSingleStep(1);
this->spinners[i][0]->setMaximum(31);
this->spinners[i][1]->setMaximum(31);
this->spinners[i][2]->setMaximum(31);
// hex box now 4 digits
this->hexEdits[i]->setInputMask("HHHH");
this->hexEdits[i]->setMaxLength(4);
}
break;
case 24:
default:
for (int i = 0; i < 16; i++) {
// sliders ranged [0, 31] with 1 single step and 4 page step
this->sliders[i][0]->setSingleStep(8);
this->sliders[i][1]->setSingleStep(8);
this->sliders[i][2]->setSingleStep(8);
this->sliders[i][0]->setPageStep(24);
this->sliders[i][1]->setPageStep(24);
this->sliders[i][2]->setPageStep(24);
this->sliders[i][0]->setMaximum(255);
this->sliders[i][1]->setMaximum(255);
this->sliders[i][2]->setMaximum(255);
// spinners limited [0, 31] with 1 step
this->spinners[i][0]->setSingleStep(8);
this->spinners[i][1]->setSingleStep(8);
this->spinners[i][2]->setSingleStep(8);
this->spinners[i][0]->setMaximum(255);
this->spinners[i][1]->setMaximum(255);
this->spinners[i][2]->setMaximum(255);
// hex box now 4 digits
this->hexEdits[i]->setInputMask("HHHHHH");
this->hexEdits[i]->setMaxLength(6);
}
break;
}
this->bitDepth = bits;
refreshColorUis();
setSignalsEnabled(true);
}
void PaletteEditor::setRgb(int colorIndex, QRgb rgb) { void PaletteEditor::setRgb(int colorIndex, QRgb rgb) {
int paletteNum = this->ui->spinBox_PaletteId->value(); int paletteNum = this->ui->spinBox_PaletteId->value();
@ -172,23 +246,45 @@ void PaletteEditor::setRgb(int colorIndex, QRgb rgb) {
} }
void PaletteEditor::setRgbFromSliders(int colorIndex) { void PaletteEditor::setRgbFromSliders(int colorIndex) {
setRgb(colorIndex, qRgb(round(this->sliders[colorIndex][0]->value() * 255. / 31.), if (this->bitDepth == 15) {
round(this->sliders[colorIndex][1]->value() * 255. / 31.), setRgb(colorIndex, qRgb(rgb8(this->sliders[colorIndex][0]->value()),
round(this->sliders[colorIndex][2]->value() * 255. / 31.))); rgb8(this->sliders[colorIndex][1]->value()),
rgb8(this->sliders[colorIndex][2]->value())));
} else {
setRgb(colorIndex, qRgb(this->sliders[colorIndex][0]->value(),
this->sliders[colorIndex][1]->value(),
this->sliders[colorIndex][2]->value()));
}
} }
void PaletteEditor::setRgbFromHexEdit(int colorIndex) { void PaletteEditor::setRgbFromHexEdit(int colorIndex) {
QString text = this->hexEdits[colorIndex]->text(); QString text = this->hexEdits[colorIndex]->text();
bool ok = false; bool ok = false;
QRgb rgb = text.toInt(&ok, 16); if (this->bitDepth == 15) {
if (!ok) rgb = 0xFFFFFFFF; int rgb15 = text.toInt(&ok, 16);
setRgb(colorIndex, rgb); int rc = gbaRed(rgb15);
int gc = gbaGreen(rgb15);
int bc = gbaBlue(rgb15);
QRgb rgb = qRgb(rc, gc, bc);
if (!ok) rgb = 0xFFFFFFFF;
setRgb(colorIndex, rgb);
} else {
QRgb rgb = text.toInt(&ok, 16);
if (!ok) rgb = 0xFFFFFFFF;
setRgb(colorIndex, rgb);
}
} }
void PaletteEditor::setRgbFromSpinners(int colorIndex) { void PaletteEditor::setRgbFromSpinners(int colorIndex) {
setRgb(colorIndex, qRgb(this->spinners[colorIndex][0]->value(), if (this->bitDepth == 15) {
this->spinners[colorIndex][1]->value(), setRgb(colorIndex, qRgb(rgb8(this->spinners[colorIndex][0]->value()),
this->spinners[colorIndex][2]->value())); rgb8(this->spinners[colorIndex][1]->value()),
rgb8(this->spinners[colorIndex][2]->value())));
} else {
setRgb(colorIndex, qRgb(this->spinners[colorIndex][0]->value(),
this->spinners[colorIndex][1]->value(),
this->spinners[colorIndex][2]->value()));
}
} }
void PaletteEditor::refreshColorUis() { void PaletteEditor::refreshColorUis() {