Binary code for my icon image is incorrect, need help

**Maarten Nieber** · 14 May 2012 12:13 AM

Hi,

I'm trying to use a custom icon in ST2. I think I have everything setup correctly, and the only problem remains in the encoding of the icon image. My icon shows up all black, but if I use the binary code for the ST2 trash can icon in my CSS it works (the trash can displays correctly).

I created my binary code like this:

1. Loaded the image into GIMP,
2. set the mode to 'indexed' (so that it uses a palette) and reduced the number of colors to 256 (or 16)
3. resized the image to 32x32 pixels
4. saved as PNG image and uploaded to image shack
5. converted it to binary using http://www.greywyvern.com/code/php/binary2base64

For some reason, this does not create a code that works with ST2. Any ideas?

Thanks,
Maarten

**mitchellsimoens** · 16 May 2012 4:44 AM

Take the base64 string and in a plain html page in the body put it in an img tag

Code:

<img src="base64 string here" />

Does it show?

**Maarten Nieber** · 18 May 2012 4:23 AM

Hi Mitchell,

yes, it shows:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAwBQTFRFF1UoIFYwHlstG1wzIl4xGWEyJ101J2I0ImQvJ2kzLWZDKWg/K203MG4yM3E1Om9GN3Y5QHU6O3k8Pnk3QHhCRnk4R3dUSnZaQn06Sn08R31TRH9OSIE4RoE+UYI6TIU7Toc+UYRUQoxARY06WYg5V4dRVYZiVIs7S5I/Xo4+WpFBZI1qZ4xwYo5xYpBmZpM9YZRjT51BY5hAZ5hPa5RxS6NGRKZHaZw+TadQUqdDS6pEZp9md59QT61IR7BJfJyGWK1IZKlOTbJFXK5CVrFETrRGeadQYLJGSLlJfKZvaLFGWrVIUrhJTrtFg6SOZbVCX7dDWLpFja07Tr5OYbpFWL1Ohqt7cLdFablGirE+dLlAZL1IkbE/aL5Cb71CaL1XdrtClLM6j7U6frtDeL1Ec8BFe78+j7Cakq+glrdNdsI/m7g3ib0/fcFAhL9Aj7w/ebyAkrV+fsJBk746gMNCnLGjfMFkh8JCg8Q7ecRficM8nbpeor00hMY9mbp+i8U9hsc+jMY+ksU/m7iojcdAjshBlMF7kMk5l8c5kso6ob99q8Uzmss9nc01jsuCpc04q8w4jc2KmtBYl9BmqdAytM0yqNA7m89trcO1otBantBnpNFUtcxUsdE0tMO2utItscmtodOFwtMwvdUxu8m9xtUowdcoqNZ8wtgqpdaVyNcrqdeQyto5u9pnsdemx90vwtHEwdiVzc/LzN1FztDMz9HOzd9Qvt+N099R0dPQ0tTRvt+huuCu1OFbxuCQ0+Fi09bS1dfUw+KewuGww+C91tjV0NrV1eRt2NrWz9/F2dvY2+V2zeap3Od+3N7b1OXK2Oimz+fL3eqH2ePd4emP4OLf3eXN3OnJ2evD4+Xi4+zT6e+p3vDI6Orn3O/a6uzp5PHR6+7q7e/r7vDt6PLt6PTh7/Hu8PLv7fTp8fPw8vbR7vXq8vTx8ffY8vbl8/Xy8vjZ8fjt9Pfz+Pni+Pju9vj09vrp9/n2+vnv+Pr3+fv4+vz5/fzz+/36/P/7/v/8bMW08AAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wFEgwTAPMt3mYAAAJaSURBVDjLfdRPaNNQHMDxOBA3qDK6ix78h+LNy5TqZTK6g6DI2oFsiMMdzBB0E2eRUejJDVap7CCCglVEFh8yL7EHW7HkGA8KHooHGS6pNjx8EhfJnnmPEH8v3dZmU7+nht+H33uXV0nX9YqqqqX11LZKHzRd0rSl4J8taZqk/2cuhFRpffnvt4qSpPph8PsH+gloU2obeIWCvwIu8oPVt+iFmPNoABhjAiwihFZBcM7a2wC/EFLQoyAUfAtgzP+M0AK6+snfvGINcP81WlCUoYvXq+E1IsDzxIZFRVGeDN3M5+eqy34IvDAAlILgAJ7dvzYzm4ceLvsCUBEA1wXBXxaLxflsdiYs9xyWAHBddw14vFq4O1+YbIJsbvqb3wKO41DKfs/mC3Pjk5lcLgfzzNRT7lEXRgBs23Zcj92bzmYvjF3OiKYmZPk7A2DbAAghtu163ptM5szw8Jg8Lsvy6OjILQA2IQAwxoQ4lK3IEwODgyNyc54+z6hDMG4CTGwQ3qX+/oHTZ1OpVDqdPpfgsGEDABH3+HgykejrSyaTpw71xAE0N1hhYovrcf/Oid7ew/v2xLtjnDoYWwAazcAAoSy4cezA3p5dsS4GJ1iNCBBX8Vjwbv/u7ljXDgZ3bAhQXw8QGJfxr/GdnduPerCgXgdgtgJkYYfyg50dEnNgbppRIIxFbHq8Y9sDl1iNEJRMoz2zgbFzRLpCbQxzw1ClMokAA04h0mMbLmjCnJQlvfYlkmHWbxvYgvMN+KrB29RqOAJAQKaY4xo8Xk3XKpEnD5XLzT+CkqbrfwDqGDXxKEeJ5QAAAABJRU5ErkJggg%3D%3D" />
  </body>
</html>

**Maarten Nieber** · 24 May 2012 11:28 PM

However, when I use it in my sencha app, it shows all black...

**bluehipy** · 25 May 2012 1:21 AM

How exactly are you setting the image code?

**Maarten Nieber** · 25 May 2012 4:47 AM

In CSS I have

Code:

.x-tab .x-button-icon.import,
.x-button .x-button-icon.x-icon-mask.import {
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAAAXNSR0IArs4c6QAAAAZQTFRF////AAAAVcLTfgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wFEgwdBGrDN/EAAAAfSURBVAjXY2CgC2BsABL8aARIgh1EsIEIFhDBga4RAG6pAlewaPhFAAAAAElFTkSuQmCC");
}

and in JS

Code:

createButton: function() {
        var button = Ext.create('Ext.Button', {
            flex: 1,
            iconMask: true,
            disabledCls: 'x-button-disabled',
            maxWidth: 300
        });
        this.innerPanel.add(button);
        return button;
    },


    initialize: function() {
      // other stuff
      this.buttonBirthDate = this.createButton();
      this.buttonBirthDate.setIconCls('import');
    }

**Maarten Nieber** · 12 Jun 2012 12:37 AM

Hi, I am still having this problem. Since the icon shows correctly when I place it in an html body, could this be a bug in ST2? I'm asking because if it is indeed a bug, I can reasonably assume it will be fixed in one of the future releases.

Thanks,
Maarten

**mitchellsimoens** · 12 Jun 2012 4:39 AM

It has to be something with your image, can you upload it so I can base64 and check it?

**Maarten Nieber** · 12 Jun 2012 5:25 AM

I used the standard st2 icon for my test. I've attached it with this post.
Thanks
Maarten

**mitchellsimoens** · 12 Jun 2012 6:22 AM

The background of the actual icon needs to be transparent like the one attached (just edited the one you provided, sure it can be done better)

This is the CSS:

Code:

.x-tab .x-button-icon.import,
.x-button .x-button-icon.x-icon-mask.import {
    -webkit-mask-image : url('data:image/png;base64,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');
}

Icon.png

Binary code for my icon image is incorrect, need help

Thread Tools

Search Thread

Display

Unanswered: Binary code for my icon image is incorrect, need help

Unanswered: Binary code for my icon image is incorrect, need help

Tags for this Thread