Cant get Image Converter to work ? What do the transparency options mean ?

I'm trying to upgrade widhrt with a better icon.

I'm using the imageconverter at:
https://espruino.github.io/EspruinoWebTo­ols/examples/imageconverter.html

I wanted to use a full RED heart when the HRM is on, and then White or Black when Off depending on background. The existing image works fine except it uses grey when off and the image is quite delicate and hard to see, my original choice - not so good.

So I have downloaded a new image of a full red heart on a transparent background.
https://icons8.com/icons/set/heart

I am just struggling to get the color fill to work. No matter what options I seem to choose from the
imageconverter I either just get a RED heart or a white heart on a black background.

File below
and code below.
What am I doing wrong ?

(function(){
  if (!Bangle.isHRMOn) return; // old firmware
  var hp = Bangle.setHRMPower;
  Bangle.setHRMPower = () => {
    hp.apply(Bangle, arguments);
    WIDGETS.widhrt.draw();
  };

  WIDGETS.widhrt={area:"tr",width:24,draw:­function() {
    g.reset();
    if (Bangle.isHRMOn()) {
      g.setColor('#f00');     // on = red
    } else {
      g.setColor(g.theme.dark ? '#0f0' : '#00f'); // off
    }

    // 3 bit rgb, no options, just red heart on black all the time
    g.drawImage(atob("FBQDAAAAAAAAAAAAAAAAAA­AAAAEgAAEgAAAkkkgEkkkAEkkkkkkkkgEkkkkkkk­kgEkkkkkkkkgEkkkkkkkkgEkkkkkkkkgEkkkkkkk­kgAkkkkkkkkAAEkkkkkkgAAAkkkkkkAAAAEkkkkg­AAAAAkkkkAAAAAAEkkgAAAAAAAkkAAAAAAAAEgAA­AAAAAAAAAAAAAAAAAAAAAA"), 1+this.x, 1+this.y);
    
    // 3 bit rgb, transparency:Y, background follows theme, but wont fill with color
    //g.drawImage(atob("FBSDAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAABJJAAJJAAAJJJIBJJJAAJJJJ­JJJJABJJJJJJJJIBJJJJJJJJIAJJJJJJJJAAJJJJ­JJJJAABJJJJJJIAAAJJJJJJAAAABJJJJIAAAAAJJ­JJAAAAAABJJIAAAAAAAJJAAAAAAAABIAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAA=="), 1+this.x, 1+this.y);

    // 3 bit rgb, transparency:Y, transpareny to color Y, just shows white all the time
    //g.drawImage(atob("FBSDAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAAB//wAP/wAAP//+B///wAP///­////wB////////+B////////+AP///////wAP///­////wAB//////+AAAP/////wAAAB////+AAAAAP/­//wAAAAAB//+AAAAAAAP/wAAAAAAAB+AAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAAAA=="), 1+this.x, 1+this.y);

    // 3 bit rgb, transpareny to color Y, black background, white heart
    //g.drawImage(atob("FBQDAAAAAAAAAAAAAAAA­AAAAAAAAAAAAAAAH//AA//AAA///4H///AA/////­///AH////////4H////////4A////////AA/////­///AAH//////4AAA//////AAAAH////4AAAAA///­/AAAAAAH//4AAAAAAA//AAAAAAAAH4AAAAAAAAAA­AAAAAAAAAAAAAAAAAAAAAAAA"), 1+this.x, 1+this.y);
    
  }};
})();

2 Attachments

i'm not sure if this would help but i think I've gotten it to work with a workaround when using the following as image

require("heatshrink").decompress(atob("i­kUgIJGgPw+E/z/D//8v//8///0//4JCj//wH/+EH­/0An/AgP4gEPEINgGg4")

I'm not sure but what i think is that only 1 bbp images can change for and background color. so i had chosen 1 bpp black and white in the convertor i also selected transparancy to color so i basically gotten a mask and compress.

what i think transparency to color does is assign a color to the transparent parts but in case of black and white you get black for transparent and white for non transparent parts (basically like a transparency mask). Since i used 1 bits per pixel image the foreground and background colors are used to draw the image so the setColor function seems to work although you had chosen red for on and blue or green depending on theme when not on (full white is #FFF full black is #000)

and transparency seems to set a transparent color but i use image object with that option as it adds a "transparency" element where you can choose the color index of the palette for which color (index) will be the transparent color, but when i tested sometimes it selected wrong index and i had to find the right color index myself for the transparant part. For example at one point i was using 8 bit images with a WEB palette but i had used Magenta as transparant color, it selected 0 as transparent index but it was actually 248 or so for magenta. But i guess this is normal, the tools can't know which color you used as color key in this case. Eventually i kept changing the transparency color index value (programmatically) until i had found the right index for magenta (as i knew it would probably be in web palette).

i struggle sometimes with the transparency stuff as well with the convertor

Thanks for the reply. I will try your example. I'm not sure compression should make any difference.

I will try 1 bpp. Though I dont understand how 1bpp could accept different 3 bit colours.

(full white is #FFF full black is #000)

Yes I set to Green and Blue to ensure I could see the other colours whilst switching themes and check the code is working. This is temporary.

It is definitely possible to do this as the existing code / image works with different colours. Also widgps also does this, using grey, orange, green. I'm just trying to change the image to a fuller one that is easier to see.

i struggle sometimes with the transparency stuff as well with the convertor

Somtimes it seems to work without issue and other times it just seems to be a major session of trial and error.

I will try 1 bpp. Though I dont understand how 1bpp could accept different 3 bit colours.

with the options i used it was made a white heart with black surrounding it. But in 1bpp pixel mode, those pixels can be replaced with the foreground and background color which you are using via setColor. but the heart will indeed contain only 1 solid color (based on the setcolor call).

Thats what seemed to be happening with me when i tested it.

Just FYI, I'd recommend you use https://www.espruino.com/Image+Converter­ rather than the one in espruinotools, but both should work ok.

• 1 bpp stores the image as 1bpp, but without color
  
• Optimal 1 bpp stores the image as 1bpp, but with a color palette which I think is what you were after
  
  

But for what you're actually doing, you're better with 1 bpp as @joyrider3774 says (just ensure the graphic itself is white, not black). Then, you can just use one image and g.setColor to adjust its color

Thanks @Gordon - So just to check.

Select '1 bit Black/White' for 1 bpp
Make sure image is white (select inverted if black)
Make sure background is transparent when you download the image.

What do you select for 'transparency ? setting - Tick or Not Tick ?
What do you select for 'transparent to colour' setting - Tick or Not Tick ?

Success ! Thanks everyone for your help.

    // image converter https://www.espruino.com/Image+Converter­ ; settings to get a fillable image
    // 1 bit bw, transparency? Y, transparent bg, white heart (must be white for color fill)
    g.drawImage(atob("FBSBAAAAAAAAAAAB+fg//8­f//n//5//+f//n//5//+P//D//wf/4D/8Af+AB+A­APAABgAAAA"), 1+this.x, 1+this.y);