Adjusting Color Palette of Embedded PNG

[zertle]

Hi!

I'm trying to add dynamic color swatches to ListItems in a TreeView. Unfortunately, ListItems don't have a ScriptUIGraphics property so I can't go that route!

I created a small, uncompressed PNG icon in Index color mode and used the toSource() trick to embed it in the script. Then I have the script update an index in the Palette Chunk to change the colors of the icons. So far it's been working on Windows, but as soon as I switch to Mac the icons no longer show up. Other embedded images display correctly. The script hasn't been throwing any errors, it just displays the ListItem without an icon. However, when a color has the same RGB values as the original palette entry, the icon will appear.

Here's a snippet of what I'm working with (minus the full strings from the toSource() 😞

var iconHead = "‰PNG /*. . .*/ PLTE"; // this runs up to the PLTE chunk header
var iconTail = "\x00\x003 /*. . .*/IEND\u00AEB`\u0082"; // starts at the second palette color index and runs to the end of the string
var w = new Window ("dialog");
var colorList = w.add('treeview', [0,0,300,200]);
var node = colorList.add( 'node', "Red" );
node.image = swatchHead2 + "\xFF\x00\x00" + swatchTail2;
node.add( 'item', "red" );
node = colorList.add( 'node', "Green" );
node.image = swatchHead2 + "\x00\xFF\x00" + swatchTail2;
node.add( 'item', "green" );
node = colorList.add( 'node', "Blue" );
node.image = swatchHead2 + "\x00\x00\xFF" + swatchTail2;
node.add( 'item', "blue" );
w.show();

The original color in the palette was 0 0 0, and so if I change any of them to "\x00\x00\x00" then the icon appears.  I've also tried using "\u00FF" unicode strings and the String.fromCharCode() function to no avail which leads me to believe it's not related to string concatenation.

I've also tried using different palettes, in Photoshop, both 'Exact' and 'System (Mac OS)', with no luck.

I'm still a little green at the PNG file format, could there possibly be some other chunk that needs to be updated as well? I feel like I read somewhere that the order of the colors might make a difference?

Update:

I tried adjusting a palette color in a .PNG file using a hex editor and I can't open it on a mac, so that is definitely the root of the problem. I'll do some more digging and be sure to post if I find a solution.

If you have more insight into the wonders of the PNG file format and know the either how to crack the code or that it's impossible and I'm wasting my time, I'd be ever in your debt!

Thanks!  :n)

[Silly-V]

Hi, what do you mean by "when the palette entry color does not change" ?

[zertle]

Sorry! I should have said when I use the same color values as in the original file. The original source text for the image had "...PLTE\x00\x00\x00\u00FF\u00FF\u00FF..." so if I use iconHead + "\x00\x00\x00" + iconTail then the image appears correctly. Any other rgb values though and it disappears.

[zertle]

Also the first two var's should be named "swatchHead" and "swatchTail", not "iconHead" "iconTail". That was my mistake while retyping for the code for the question.

[Silly-V]

Hmm, I do not know too much about this, but I will say that for myself, I have resorted to always writing the embedded files to the file system in some special folder devoted to the script, then using those files for my images. I found myself face to face with the most illusive and inglorious Error 520, where unpredictably and quite likely, the mechanism of displaying an embedded data image would malfunction causing the error. After at first disliking the thought, it grew on me after being the only known way to show images and not get the error, and I use it to this day.

[moluapple · Accepted solution]

Hi, the CRC data also need to change. With the help of this link: Generate client-side PNG files using JavaScript • Code is poetry , I got this.

// http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/
function byte4(w) {
    return String.fromCharCode((w >> 24) & 255, (w >> 16) & 255, (w >> 8) & 255, w & 255);
}
function crc32(png) {
    var _crc32 = [];
    for (var i = 0; i < 256; i++) {
        var c = i;
        for (var j = 0; j < 8; j++) {
            if (c & 1) {
                c = -306674912 ^ ((c >> 1) & 0x7fffffff);
            } else {
                c = (c >> 1) & 0x7fffffff;
            }
        }
        _crc32 = c;
    }
    var crc = -1;
    for (var i = 0; i < png.length; i++) {
        crc = _crc32[(crc ^ png.charCodeAt(0)) & 0xff] ^ ((crc >> 8) & 0x00ffffff);
    }
    return byte4(crc ^ -1);
}
/****************************************************************/
var head = [
        '\x89PNG',
        '\r\n\x1A\n',           // head
        '\x00\x00\x00\r',       // length = 13 (\r = \x0D = 13)
        'IHDR',
        '\x00\x00\x00\n',       // width of image = 10 (\n = \x0A = 10)
        '\x00\x00\x00\n',       // heigth of image = 10
        '\b\x03\x00\x00\x00',   // \b = \x08 2^8 = 256 bit, 03 for index color type
        '\xBA\xEC?\x8F',        // crc of IHDR
        '\x00\x00\x00\x03',     // color palette, 03 means only 1 color 
        'PLTE'
        ].join(''),
    tail = [
        '\x00\x00\x00y',        // IDAT length, y = 0x79 = 121
        'IDAT',
        'x\xDA\x01',            // compress info
        'n\x00\x91\xFF',        // length info
        new Array(111)          
            .join('\x00'),      // compressed data
        '\x00n\x00\x01',        // Adler32 info
        '}P\x88\x84',           // crc of IDAT
        '\x00\x00\x00\x00',
        'IEND\xAEB`\x82'        // IEND
        ].join(''),
    PLTE = 'PLTE',
    colors = {
        'red': '\xFF\x00\x00',
        'green': '\x00\xFF\x00',
        'blue': '\x00\x00\xFF'
    },
    w = new Window('dialog'),
    colorList = w.add('treeview', [0, 0, 300, 200]);
for (c in colors) {
    var node = colorList.add('node', c),
        chunk = crc32(PLTE + colors),
        f = File(c + '.png');
    f.encoding = 'BINARY';
    f.open('w');
    f.write(head + colors + chunk + tail);
    f.close();
    node.image = f;
    f.remove();
    node.add('item', c)
}
w.show();

[moluapple]

Well, with some more test(Windows only),  it seems that the CRC data can just be '\x00\x00\x00\x00'!

var head = '\x89PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x00\n\x00\x00\x00\n\b\x03\x00\x00\x00\xBA\xEC?\x8F\x00\x00\x00\x03PLTE',
    tail = '\x00\x00\x00\x01tRNS\xFFm\xE47\xEB\x00\x00\x00yIDATx\xDA\x01n\x00\x91\xFF\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00n\x00\x01}P\x88\x84\x00\x00\x00\x00IEND\xAEB`\x82',
    CRCData = '\x00\x00\x00\x00',
    colors = {
        'red': '\xFF\x00\x00',
        'green': '\x00\xFF\x00',
        'blue': '\x00\x00\xFF'
    },
    w = new Window('dialog'),
    colorList = w.add('treeview', [0, 0, 300, 200]);
for (c in colors) {
    var node = colorList.add('node', c),
        f = File(c + '.png');
    f.encoding = 'BINARY';
    f.open('w');
    f.write(head + colors + CRCData + tail);
    f.close();
    node.image = f;
    f.remove();
    node.add('item', c)
}
w.show();

[zertle]

Found another good link on the subject for future ref

http://mainisusuallyafunction.blogspot.com/2012/04/minimal-encoder-for-uncompressed-pngs.html