Make a palette image from palette data

Kris Revi

@Asperamanca just tested this code

QImage MainWindow::createPaletteImage(QJsonArray jsonArr)
{
    int width = 500;
    int height = 26;
    QImage image(width, height, QImage::Format_RGB32);
    image.fill(Qt::white);

    for (int i = 0; i < jsonArr.size(); i++)
    {
        for (int h = 0; h < height; ++h)
        {
            QPainter painter(&image);

            QLinearGradient gradient;
            gradient = QLinearGradient(i, h, width, height);
            gradient.setColorAt(0.0, QColor(0,0,0,255));
            painter.setBrush(QBrush(gradient));
        }
    }
    return image;
}

void MainWindow::checkForNewPalettes()
{
    QFile file(save_path + data_folder + palette_json);
    QByteArray jsonArray;

    if ( file.open(QIODevice::ReadOnly | QIODevice::Text) )
    {
        jsonArray = file.readAll();
        file.close();
    }

    QJsonParseError error;
    QJsonDocument doc = QJsonDocument::fromJson(jsonArray, &error);

    QJsonObject object = doc.object();

    QJsonArray value = object.find("Palettes")->toArray();

    for (auto v : value)
    {
        QString paletteName = v.toObject().value("Name").toString();
        QString paletteImage = v.toObject().value("imageURL").toString();
        QJsonArray palettePalette = v.toObject().value("palette").toArray();

        if ( paletteImage.size() == 0)
        {
            qDebug() << "Found a palette that has no image";
            QImage img;
            qDebug() << "Creating Image";
            img = createPaletteImage(palettePalette);
            qDebug() << "Image Created, now saving it!";
            img.save(save_path + palette_folder + "/" + paletteName + ".jpg");
            // Save the image to palette folder (using the name "paletteName")
            // Update the URL to img "paletteImage" to the json file
            // Done
        }
        qDebug() << "DONE!";
    }
}

this creates Rainbow.jpg with a white background and the right dimensions

    int width = 500;
    int height = 26;

but no rainbow palette gradient

Kris Revi

so im doing something wrong :S obvs

mpergand

@Kris-Revi

classic rainbow like the above image:

        float p=0,s=1.0/6;
        QLinearGradient gradient = QLinearGradient(0,0, rect().width(), 0);
        gradient.setColorAt(p, QColor(255,0,0));        // red
        gradient.setColorAt(p+=s, QColor(255,255,0));   // yellow
        gradient.setColorAt(p+=s, QColor(0,255,0));     // green
        gradient.setColorAt(p+=s, QColor(0,255,255));   // cyan
        gradient.setColorAt(p+=s, QColor(0,0,255));     // blue
        gradient.setColorAt(p+=s, QColor(255,0,255));   // magenta
        gradient.setColorAt(p+=s, QColor(255,0,0));     // red
        painter.fillRect(rect(),QBrush(gradient));

from your data:

        float p=0,s=1.0/8;
        QLinearGradient gradient = QLinearGradient(0,0, rect().width(), 0);
        gradient.setColorAt(p, QColor(255,0,0));
        gradient.setColorAt(p+=s, QColor(171,85,0));
        gradient.setColorAt(p+=s, QColor(171,171,0));
        gradient.setColorAt(p+=s, QColor(0,255,0));
        gradient.setColorAt(p+=s, QColor(0,171,85));
        gradient.setColorAt(p+=s, QColor(0,0,255));
        gradient.setColorAt(p+=s, QColor(85,0,171));
        gradient.setColorAt(p+=s, QColor(171,0,85));
        gradient.setColorAt(p+=s, QColor(255,0,0));
        painter.fillRect(rect(),QBrush(gradient));

alt text

Kris Revi

@mpergand yes but how would that work in my code? you setup all the points manualy here

i need to go through QJsonArray jsonArr and in this case QJsonArray jsonArr contains

// Position (X), Red, Green, Blue
0, 255, 0, 0,
32,171,85,0,
64,171,171,0,
96,0,255,0,
128,0,171,85,
160,0,0,255,
192,85,0,171,
224,171,0,85,
255,255,0,0

as this is the default but i plan to add more palettes to the json so it can be bigger (more points) or less but always 0 (start) and 255 (end) point but there could be many points in between

mpergand

As you can see in my example, you need to define a step variable base of the number of points.
float step=1.0/(points-1)

Kris Revi

@mpergand but how can i count the points in that array? :S

mpergand

jsonArr.count() ?

As the first param in the json array defines the point position, you need to convert the range 0-255 to 0.0-1.0

Kris Revi

@mpergand but would that not count every int in the array? :S

{
    "Palettes": [
        {
            "Name": "Rainbow",
            "imageURL": "",
            "palette": [
                0,
                255,
                0,
                0,
                32,
                171,
                85,
                0,
                64,
                171,
                171,
                0,
                96,
                0,
                255,
                0,
                128,
                0,
                171,
                85,
                160,
                0,
                0,
                255,
                192,
                85,
                0,
                171,
                224,
                171,
                0,
                85,
                255,
                255,
                0,
                0
            ]
        }
    ]
}

mpergand

jsonArr.count()/4 ?

Kris Revi

@mpergand

    int amountPoint;
    amountPoint = jsonArr.count()/4;

gives 9 so now i can do

float p=0,s=1.0/amountPoint;

?

mpergand

float p=0,s=1.0/(amountPoint-1);

Kris Revi

@mpergand

QImage MainWindow::createPaletteImage(QJsonArray jsonArr)
{
    int width = 500;
    int height = 26;
    QImage image(width, height, QImage::Format_RGB32);
    image.fill(Qt::white);

    QPainter painter(&image);

    int amountPoint;
    amountPoint = jsonArr.count()/4;

    for (int i = 0; i < jsonArr.size(); i++)
    {
        float p=0,s=1.0/(amountPoint-1);
        QLinearGradient gradient = QLinearGradient(0,0, rect().width(), 0);
    }
    return image;
}

so far correct?

now what?

mpergand

for each point
      get pos, r, v, b
      set color gradiant from the vars above

Kris Revi

@mpergand sooo

    int amountPoint;
    amountPoint = jsonArr.count()/4;
    float p=0,s=1.0/(amountPoint-1);
    QLinearGradient gradient = QLinearGradient(0,0, rect().width(), 0);

    for (int i = 0; i < amountPoint; i++)
    {
        // but how to get the pos, r, g, b since its just a long array of ints
       // gradient.setColorAt(p, QColor(r,g,b));
    }

mpergand

qjsonarray.at

Kris Revi

@mpergand

int pos = jsonArr.at(i).toInt();

but what about R, G, B?

int r = jsonArr.at(i).toInt();
int g = jsonArr.at(i).toInt();
int b = jsonArr.at(i).toInt();

Kris Revi

am i doing something wrong here?

QImage MainWindow::createPaletteImage(QJsonArray jsonArr)
{
    int width = 500;
    int height = 26;
    QImage image(width, height, QImage::Format_RGB32);
    image.fill(Qt::white);

    QPainter painter(&image);

    int amountPoint;
    amountPoint = jsonArr.count()/4;
    float p=0,s=1.0/(amountPoint-1);
    QLinearGradient gradient = QLinearGradient(0,0, rect().width(), 0);

    for (int i = 0; i < amountPoint; i++)
    {
        int pos = jsonArr.at(i).toInt();
        int r = jsonArr.at(i+1).toInt();
        int g = jsonArr.at(i+2).toInt();
        int b = jsonArr.at(i+3).toInt();

        gradient.setColorAt(p, QColor(r,g,b));
    }
    return image;
}

Christian Ehrlicher

@Kris-Revi said in Make a palette image from palette data:

int pos = jsonArr.at(i).toInt();
gradient.setColorAt(p, QColor(r,g,b));

Apart from the really strange idea to store a image in such an extensive way you want 'pos' in the second call.

Kris Revi

@Christian-Ehrlicher said in Make a palette image from palette data:

you want 'pos' in the second call.

        int pos = jsonArr.at(i).toInt();
        int r = jsonArr.at(i+1).toInt();
        int g = jsonArr.at(i+2).toInt();
        int b = jsonArr.at(i+3).toInt();

        gradient.setColorAt(pos, QColor(r,g,b));

huh like so? :S

mpergand

for(int p=0; p<amountPoint; p++)
        {
            int pos=jsonArr[p*4];
            int r=jsonArr[p*4+1];
            int g=jsonArr[p*4+2];
            int b=jsonArr[p*4+3];
            
            gradient.setColorAt(pos/255.0, QColor(r,g,b));
        }