« previous next »
Pages: [1]   Go Down

Author Topic: How do I visualize a RRRGGGBB color palette?  (Read 1641 times)

0 Members and 2 Guests are viewing this topic.

Offline MarkSTopic starter

  • Supporter
  • ****
  • Posts: 881
  • Country: us
How do I visualize a RRRGGGBB color palette?
« on: February 06, 2025, 05:44:43 pm »
I'm working on a VGA circuit that will be in the format of RRRGGGBB. I'd like to write some code to visualize the palette, but I'm not getting the results I want. I googled and found this site: https://www.bigmessowires.com/2008/07/04/video-palette-setup/
The first two palettes shown are what I'm looking to achieve; either would work. Now, I could just leave it there, since I can see the result from the site, but now I want to figure out why I cannot get the same results in my code. It would seem that simply stringing bits together doesn't result in a palette. I'm not sure how to achieve this. I'd like to have this code working so I can visualize palettes with different bits per component. The attached image is the result I'm getting.

[edit] I do understand that the final result in hardware will depend on the DACs used, and thus the generated palette in hardware may not match the one I generate in software.[/edit]

The relevant code:
***WARNING!! INCOMING WINDOWS GDI CRAP!***

Code: [Select]
    int x,y;
    x = 0;
    y = 0;
    for (int color = 0; color < 256; color++)
    {
        int red = (color >> 5) & 0x07;
        int green = color & 0x07;
        int blue = (color >> 3) & 0x03;
        std::cout << std::bitset<8>(red) << " " << std::bitset<8>(green) << " " << std::bitset<8>(blue) << std::endl;
        RECT rect = {x, y, x + 32, y + 32};
        HBRUSH brush = CreateSolidBrush(RGB(0xff >> red, 0xff >> green, 0xff >> blue));

        FillRect(hDC, &rect, brush);
        x += 32;
        if(x >= 512)
        {
            x = 0;
            y += 32;
        }
    }
« Last Edit: February 06, 2025, 05:59:13 pm by MarkS »
Logged
 

Offline MarkF

  • Super Contributor
  • ***
  • Posts: 3270
  • Country: us
Re: How do I visualize a RRRGGGBB color palette?
« Reply #1 on: February 06, 2025, 06:07:06 pm »
It looks like you're inverting the values instead of scaling them up to a 0 to 255 range.
It seems to me...

  instead of this:
      HBRUSH brush = CreateSolidBrush( RGB(0xff >> red, 0xff >> green, 0xff >> blue) );

  you want this:
      HBRUSH brush = CreateSolidBrush( RGB(red << 5, green << 5, blue << 6) );
Logged
 
The following users thanked this post: MarkS, I wanted a rude username

Offline MarkSTopic starter

  • Supporter
  • ****
  • Posts: 881
  • Country: us
Re: How do I visualize a RRRGGGBB color palette?
« Reply #2 on: February 06, 2025, 06:10:25 pm »
Quote from: MarkF on February 06, 2025, 06:07:06 pm
It looks like you're inverting the values instead of scaling them up to a 0 to 255 range.
It seems to me...

  instead of this:
      HBRUSH brush = CreateSolidBrush( RGB(0xff >> red, 0xff >> green, 0xff >> blue) );

  you want this:
      HBRUSH brush = CreateSolidBrush( RGB(red << 5, green << 5, blue << 6) );


That did it! Thank you!

Actually, no. Something is still not quite right. I cannot get pure white with this method.

Fixed. Needed to map the r, g and b values to 0..255.
« Last Edit: February 06, 2025, 07:01:40 pm by MarkS »
Logged
 

Offline radiolistener

  • Super Contributor
  • ***
  • Posts: 5733
  • Country: Earth
Re: How do I visualize a RRRGGGBB color palette?
« Reply #3 on: February 18, 2025, 05:55:37 pm »
here is nice color picker palette for 8-bit 332 color:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8-bit palette RRRGGBB</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        /* Grid layout for the palette */
        .palette {
            display: grid;
            grid-template-columns: repeat(16, 24px);
            gap: 0px;
            margin: 20px auto;
            width: max-content;
        }
        /* Color box style with a thin 1px border */
        .color-box {
            width: 24px;
            height: 24px;
            cursor: pointer;
            outline: 1px solid #888; /* Thin border without affecting layout */
            outline-offset: -0.5px;  /* Moves outline inside, preventing double thickness */
            box-sizing: border-box;
            margin: 0;
        }
        .selected-color { margin-top: 20px; font-size: 20px; }
        .missing-values { margin-top: 10px; font-size: 16px; white-space: pre-wrap; }
    </style>   
</head>
<body>
    <h2>8-bit RRRGGGBB Color Palette</h2>
    <div class="palette" id="palette"></div>
    <div class="selected-color" id="selectedColor">Selected Color: None</div>
    <div class="missing-values" id="missingValues"></div>
    <script>
        // Prepare colormap
        const array = [];
        for (let i = 0; i < 256; i  ) {
            let col = i & 15;
            let row = i >> 4;
            if (col < 8) col ^= 7;
            if (row >= 8) row ^= 7;
            if (row >= 8) {
                col  = 16;
                row -= 8;
            }
            const index = row*32 col;
            const ir = Math.floor((index >> 5) & 7);
            const ig = Math.floor((index >> 0) & 7);
            const ib = Math.floor((index >> 3) & 3);
            const rgb332 = (ir << 5) | (ig << 2) | ib;
            array.push(rgb332);
        }
        const palette = document.getElementById('palette');
        const usedIndex = new Set();
        for (let i = 0; i < 256; i  ) {
            const div = document.createElement('div');
            div.className = 'color-box';
            palette.appendChild(div);

            const rgb332 = array[i];
            const r = (rgb332 >> 5) & 7;
            const g = (rgb332 >> 2) & 7;
            const b = (rgb332 >> 0) & 3;
            const rgb888 = (Math.floor(255 * r / 7) << 16) | (Math.floor(255 * g / 7) << 8) | Math.floor(255 * b / 3);
            const hexColor332 = `#${rgb332.toString(16).padStart(2, '0')}`;
            const hexColor888 = `#${rgb888.toString(16).padStart(6, '0')}`;

            if (usedIndex.has(rgb332)) continue;
           
            div.style.backgroundColor = hexColor888;
            div.title = `rgb332(${r},${g},${b}) => ${hexColor332}`;
            div.onclick = () => document.getElementById("selectedColor").innerText = `Selected Color: ${hexColor332} => ${hexColor888}`;
           
            usedIndex.add(rgb332);
        }
        // Check missing values...
        const missingValues = [];
        for (let i = 0; i < 256; i  ) {
            if (!usedIndex.has(i)) {
                missingValues.push(i);
            }
        }
        var div = document.getElementById("missingValues");
        div.innerText = `Missing Values (${missingValues.length}):\n${missingValues.join(', ')}`;
        div.style.display = missingValues.length === 0 ? 'none':'block';
    </script>
</body>
</html>

Logged
 
Pages: [1]   Go Up
« previous next »

Share me

Digg  Facebook  SlashDot  Delicious  Technorati  Twitter  Google  Yahoo
Smf

 


EEVblog® Main Site EEVblog® on Youtube EEVblog® on Twitter EEVblog® on Facebook EEVblog® on Odysee