RGB to PixelIt-Integer

[supermonchen]

Hello,

How to convert a rgb-value - like the icon editor - to an integer in JavaScrpt?
For example rgb(255,0,0) = 63488. Asking because I like to write a script that gets any LaMetric-icon and covert it to an integer array like PixelIt needs it.

Thanks a lot

[TylonHH]

To convert an RGB value to an integer in JavaScript, you can use bit shifting and bitwise OR operations. For example, if you have an RGB value like rgb(255, 0, 0), you can convert it to an integer using the following formula: (red << 16) | (green << 8) | blue.

Here's a function that does this conversion:

function rgbToInt(red, green, blue) {
  return (red << 16) | (green << 8) | blue;
}

var intValue = rgbToInt(255, 0, 0); // Converts rgb(255, 0, 0) to an integer

This function shifts the red value 16 bits to the left, the green value 8 bits to the left, and then combines them with the blue value using the bitwise OR operation. The resulting integer for rgb(255, 0, 0) will be 16711680, not 63488. If you need a different format or handling, you may need to adjust the function accordingly.

[supermonchen]

Hello TylonHH,
Thanks a lot for your quick response. However
this is not exactly what I need. This JavaScript-function should do exactly what the PixelIt icon editor does. For example this editor turns FF0000 into 63488. I already found your way on Google and they all turn red into 16711680 but what does the pixel editor do differently to come to 63488? This Is what I need.

Thanks,

Simon.

[supermonchen]

To be more precise: How to determine the color value with a function like the icon creator does it? See attached screenshot.

[foorschtbar]

Asking because I like to write a script that gets any LaMetric-icon and covert it to an integer array like PixelIt needs it.

I´am working already on such a thing :) http://dev.spaps.de/pixelit/

[supermonchen]

Nice work foorschtbar! Keep on! Do you know how the icon creator turns Hex/RGB-Values into integer? So for example #FF0000 to 63488?

[foorschtbar]

You search for RGB565, PixelIt use this representation for images.

function rgbHexToRgb565(hex) {
    // Extract individual RGB components from hex
    const red = parseInt(hex.substring(1, 3), 16);
    const green = parseInt(hex.substring(3, 5), 16);
    const blue = parseInt(hex.substring(5, 7), 16);

    // Convert RGB to RGB565
    const r5 = (red >> 3) & 0x1F;
    const g6 = (green >> 2) & 0x3F;
    const b5 = (blue >> 3) & 0x1F;

    // Combine components into RGB565 integer
    const rgb565 = (r5 << 11) | (g6 << 5) | b5;

    return rgb565;
}

// Example usage
const hexColor = "#FF0000";
const rgb565Value = rgbHexToRgb565(hexColor);
console.log(rgb565Value);

[supermonchen]

Working great! Thanks a lot!

[rknotter]

Thank you!! Now I can edit my Pixel Bitmaps by pasting the representation in the input field. This is afaik not possible in the webUI. I opened a topic about this earlier: #345