Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Make a palette image from palette data
Forum Updated to NodeBB v4.3 + New Features

Make a palette image from palette data

Scheduled Pinned Locked Moved Solved General and Desktop
35 Posts 4 Posters 4.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Asperamanca

    @Kris-Revi
    I would start with a new QImage using the constructor
    QImage::QImage(const QSize &size, QImage::Format format)

    Then you can call fill to fill with a background color.
    Then you attach a QPainter to it like so:

    QPainter painter(&image);
    

    And then you can use functions like QPainter::drawRectangle to paint color samples where you want them.

    When you are done painting, you can use QImage::save to write it to a file.

    K Offline
    K Offline
    Kris Revi
    wrote on last edited by
    #3

    @Asperamanca

    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);
    }
    

    so far so good? but dont i have to use QLinearGradient?

    1 Reply Last reply
    0
    • A Offline
      A Offline
      Asperamanca
      wrote on last edited by
      #4

      I don't fully understand how your palette image should look like.
      If you'd like to have a gradient, you can apply a QLinearGradient to the QBrush, which you set as active brush on QPainter (QPainter::setBrush) before you draw the rectangle

      K 1 Reply Last reply
      0
      • A Asperamanca

        I don't fully understand how your palette image should look like.
        If you'd like to have a gradient, you can apply a QLinearGradient to the QBrush, which you set as active brush on QPainter (QPainter::setBrush) before you draw the rectangle

        K Offline
        K Offline
        Kris Revi
        wrote on last edited by
        #5

        @Asperamanca

        This is how it is supposed to look :)

        8e398618-b0c3-40e6-a291-3bd210f5dbe7-Rainbow.png

        from this

        // 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
        
        A 1 Reply Last reply
        0
        • K Kris Revi

          @Asperamanca

          This is how it is supposed to look :)

          8e398618-b0c3-40e6-a291-3bd210f5dbe7-Rainbow.png

          from this

          // 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
          
          A Offline
          A Offline
          Asperamanca
          wrote on last edited by
          #6

          @Kris-Revi
          Gradients only do linear interpolation between colors. Not sure whether this yields the result you like. Try what happens, if you don't like the result, I would fall back to drawing vertical lines from left to right, each with the correct color.

          K 1 Reply Last reply
          0
          • A Asperamanca

            @Kris-Revi
            Gradients only do linear interpolation between colors. Not sure whether this yields the result you like. Try what happens, if you don't like the result, I would fall back to drawing vertical lines from left to right, each with the correct color.

            K Offline
            K Offline
            Kris Revi
            wrote on last edited by
            #7

            @Asperamanca am i in the ballpark here or?

            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));
                    }
                }
            }
            
            A 1 Reply Last reply
            0
            • K Kris Revi

              @Asperamanca am i in the ballpark here or?

              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));
                      }
                  }
              }
              
              A Offline
              A Offline
              Asperamanca
              wrote on last edited by
              #8

              @Kris-Revi
              Never used gradients myself, so I would try and see. But I think you'd need to set at least 2 colors to make it a gradient.

              K 2 Replies Last reply
              0
              • A Asperamanca

                @Kris-Revi
                Never used gradients myself, so I would try and see. But I think you'd need to set at least 2 colors to make it a gradient.

                K Offline
                K Offline
                Kris Revi
                wrote on last edited by
                #9

                @Asperamanca well hmmm i will wait and see if anyone else respons to this that has used QLinearGradient then :)

                1 Reply Last reply
                0
                • A Asperamanca

                  @Kris-Revi
                  Never used gradients myself, so I would try and see. But I think you'd need to set at least 2 colors to make it a gradient.

                  K Offline
                  K Offline
                  Kris Revi
                  wrote on last edited by
                  #10

                  @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

                  1 Reply Last reply
                  0
                  • K Offline
                    K Offline
                    Kris Revi
                    wrote on last edited by
                    #11

                    so im doing something wrong :S obvs

                    M 1 Reply Last reply
                    0
                    • K Kris Revi

                      so im doing something wrong :S obvs

                      M Offline
                      M Offline
                      mpergand
                      wrote on last edited by mpergand
                      #12

                      @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

                      K 1 Reply Last reply
                      0
                      • M 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

                        K Offline
                        K Offline
                        Kris Revi
                        wrote on last edited by Kris Revi
                        #13

                        @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

                        M 1 Reply Last reply
                        0
                        • K 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

                          M Offline
                          M Offline
                          mpergand
                          wrote on last edited by
                          #14

                          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)

                          K 1 Reply Last reply
                          0
                          • M 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)

                            K Offline
                            K Offline
                            Kris Revi
                            wrote on last edited by
                            #15

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

                            M 1 Reply Last reply
                            0
                            • K Kris Revi

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

                              M Offline
                              M Offline
                              mpergand
                              wrote on last edited by mpergand
                              #16

                              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

                              K 1 Reply Last reply
                              0
                              • M 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

                                K Offline
                                K Offline
                                Kris Revi
                                wrote on last edited by
                                #17

                                @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
                                            ]
                                        }
                                    ]
                                }
                                
                                1 Reply Last reply
                                0
                                • M Offline
                                  M Offline
                                  mpergand
                                  wrote on last edited by mpergand
                                  #18

                                  jsonArr.count()/4 ?

                                  K 1 Reply Last reply
                                  0
                                  • M mpergand

                                    jsonArr.count()/4 ?

                                    K Offline
                                    K Offline
                                    Kris Revi
                                    wrote on last edited by
                                    #19

                                    @mpergand

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

                                    gives 9 so now i can do

                                    float p=0,s=1.0/amountPoint;
                                    

                                    ?

                                    M 1 Reply Last reply
                                    0
                                    • K Kris Revi

                                      @mpergand

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

                                      gives 9 so now i can do

                                      float p=0,s=1.0/amountPoint;
                                      

                                      ?

                                      M Offline
                                      M Offline
                                      mpergand
                                      wrote on last edited by
                                      #20

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

                                      K 1 Reply Last reply
                                      0
                                      • M mpergand

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

                                        K Offline
                                        K Offline
                                        Kris Revi
                                        wrote on last edited by
                                        #21

                                        @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?

                                        M 1 Reply Last reply
                                        0
                                        • K 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?

                                          M Offline
                                          M Offline
                                          mpergand
                                          wrote on last edited by mpergand
                                          #22
                                          for each point
                                                get pos, r, v, b
                                                set color gradiant from the vars above
                                          
                                          K 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved